How to set Font Size without using a WebStyle

Is there a way to set the font size in the Open event of WebTextArea and WebTextField without using a WebStyle?

The controls are being created dynamically and the font size varies from one to another. Using works for a WebLabel but not WebTextArea and WebTextField.

https://www.w3schools.com/cssref/pr_font_font-size.asp

WebTextField is an input tag inside a div, and webtextarea is a textarea tag inside a div.

[quote=350919:@Michel Bujardet]https://www.w3schools.com/cssref/pr_font_font-size.asp

WebTextField is an input tag inside a div, and webtextarea is a textarea tag inside a div.[/quote]
Thanks @Michel Bujardet

Will you please provide an example of the code to place in the Open event?

me.ExecuteJavascript("document.getElementById('" + me.ControlID + "').style.fontSize='14px';")

Written in the post editor disclaimer.

me.ExecuteJavascript("document.getElementById('" + me.ControlID + "_inner').style.fontSize='14px';")

OK, folks, setting the font size in code simply does not work. I tried to add the now ubiquitous !important to no avail.

I give up. It is possible to change color, font family, but NOT font size…

Thanks @Tim Parnell and @Michel Bujardet

[quote=350938:@Michel Bujardet]OK, folks, setting the font size in code simply does not work. I tried to add the now ubiquitous !important to no avail.

I give up. It is possible to change color, font family, but NOT font size…[/quote]
That’s very bad news. When dynamically adding controls to a web page, is there any way to change the font size, especially when the sizes are not known at the time the app is developed and compiled? Perhaps @Greg O’Lone can provide some guidance . . .

I just tried this on Safari, Firefox and Chrome and it does work… but 14px is really close to the default size. You may not be noticing the change. Try “6px” instead.

NOTE: I did change me.ControlID to TextArea1.ControlID just to be specific about it.

BIG NOTE: Directly modifying the DOM is a great way to shoot yourself in the foot…

Thanks @Greg O’Lone

Is there a safer way to set the font size when the value is not known until runtime?

[quote=350956:@Frederick Roller]Thanks @Greg O’Lone

Is there a safer way to set the font size when the value is not known until runtime?[/quote]
Not unless you want to create a style for every size. Just be aware that we make changes to the framework over time and calling ExecuteJavascript to directly manipulate the DOM tends to be the thing that breaks. We don’t do it to intentionally break projects, but there’s just no way for us to avoid all of the hacks that anyone has applied ever.

Understood. Thanks Greg.

Sounds like we need to be able to create WebStyles via code.

I’m really curious about the use-case though… what is it that you are trying to accomplish that you need to be able to change the text size of an editable field on-the-fly?

I’m not sure what Fred’s case is, but in some of our projects we’ve let users to selected a color and assign it to a record type. In web, you have to create colors in advance and let the users pick from that list.

To get around that issue I ended up generating all of the HTML named colors by messing with the Xojo WebStyle XML code: https://campsoftware.com/blog/index_files/Xojo-Background-HTML-Named-Color-Styles-Generated-from-FileMaker.php

That got me to where I had a ton of colors that the user could choose from, but it would have been better to be able to generate a WebStyle.

I have used the WebPageSource control to alter the CSS of existing styles when a page is opened. I have made a quick & dirty example and loaded it at:-

http://www.cmas-net.org.uk/xojo/ExampleModCSS.xojo_binary_project

This example changes the default text colour for the page and specifically alters the styles used by a label and a textbox on the page.

For a webstyle created via code I’ve created a feature request many months ago: <https://xojo.com/issue/41736>

We are migrating a desktop app with a user defined interface. The users specify the types of controls, their placement, their size, their font, their font size, etc. The app creates the interface on the fly. Once created, none of the attributes need to be changed. So we need to set the font size upon creation of the control but not after it’s been placed on a page.

There are so many properties not editable with the style edtor included in the IDE.
Many other properties can’t be overridden at runtime using or not the !important clause.

[quote=351053:@Chris Carter]I have used the WebPageSource control to alter the CSS of existing styles when a page is opened. I have made a quick & dirty example and loaded it at:-

http://www.cmas-net.org.uk/xojo/ExampleModCSS.xojo_binary_project

This example changes the default text colour for the page and specifically alters the styles used by a label and a textbox on the page.[/quote]

would it be possible to have a external css file and then on the webpagesource read the external css file??

[quote=351053:@Chris Carter]I have used the WebPageSource control to alter the CSS of existing styles when a page is opened. I have made a quick & dirty example and loaded it at:-

http://www.cmas-net.org.uk/xojo/ExampleModCSS.xojo_binary_project

This example changes the default text colour for the page and specifically alters the styles used by a label and a textbox on the page.[/quote]

also i have no idea i can do webpagesource. i used to use the htmlheader and put the embed css style there.