WebTextField Height and Font Style Not Working!

Targets Web
1

I’m working on a new Web App and I need the WebTextField height to be larger than the default 38 and with a larger font size. I’ve tried the following in both the Opening and Shown events and the only part that works is the color.

Var Style As  New WebStyle
Style.FontSize = 24
Style.BackgroundColor = LightYellow
Style.BorderColor = LightYellow
Me.Style = Style
Me.Height = 80

Is there some other way to do this that isn’t broken?

2

Opening event:

me.Style.Value("height") = "100%"
me.Style.Value("font-size") = "24px"

Design your WebTextField on the IDE to 80px or other height.

Edit: left set on the ide to 80px with above code, right the normal WebTextField
image

1 Like
3

Thanks Alberto. You always seem to save the day!

2 Likes
4

One more Question: Is there a resource that shows these styling options. I also need to make the Text bold and that’s not working either using

Me.Style.Bold = True
5

The MDN is a great resource. This is their article for text & font styling:

The CSS property you’re looking for is font-weight.

So it should be something like:

Me.Style.Value("font-weight") = "bold"
6

What version of Xojo are you using? With Xojo2022r4:
image

Opening code on left:

me.Style.Value("height") = "100%"
me.Style.Value("font-size") = "24px"
me.Style.Bold = True

Opening code right:

me.Style.Value("height") = "100%"
me.Style.Value("font-size") = "24px"
'me.Style.Bold = True
7

This code seems to work too:

me.Style.FontSize = 24

instead of using

me.Style.Value("font-size") = "24px"

Testing your original code (changing LightYellow to Color.Yellow) everything works but the height (because we don’t have height: 100%)

So I don’t know if the problem is a different version of Xojo or else.

1 Like
8

OK. So I may have to switch to GrafittiTextField to capture the enter key because WebTextField doesn’t have a Keydown event, (boo!), and GreafittiTextField has an EnterPressed event that I can use. However the same formatting that works in a WebTextField fails on a GreafittiTextField except for the “font-size”. Screen Capture below WebTextField is on the left.

me.Style.Value("height") = "100%"
me.Style.Value("font-size") = "48px"
Me.Style.Value("font-weight") = "900"
Me.Style.Value("text-align") = "center"

Capture
Capture695×124 4.22 KB

@Anthony_G_Cyphers may be able to guide me and I filed a support ticket with him, but I may not hear from him today. Does anyone else know how to do this with GrafittiTextField? Anthony’s docs are too sparse to sort it out. Everything I’ve tried gives me errors.

9

It is a shame that Xojo is not RAD anymore, you have to learn CSS if you want to work with the styles.

But since xojo is suposed to use a css framework, it should use the classes from such framework istead of styles, but xojo don expose methods to use those classes :roll_eyes:

To have a bigger field with bold text, a code like this could be used:

Dim JS As String = "document.getElementById('" + TextField1.ControlID + "_field').classList.add('font-weight-bold', 'form-control-lg', 'text-center');"

Me.ExecuteJavaScript(JS)

Exept that it this code fails in the Opening event :man_facepalming:t2:

But you can use it once the page is fully loaded (if you dont care that the styles change while the user is looking)

10

I have responded to your ticket with the solution.

1 Like
11

And of course after beating on it for a while I almost had it figured out when your reply came in. Thanks for the reply.

1 Like