Learning Xojo

This will be a quick one. Let’s create a simple WebProject in Xojo Web 2 and add a WebButton:

Look of the button in the Xojo IDE

This will give you the following result in your browser:

Button in your browser (Safari in this case)

So far so good, now let’s change the height of the button in the Xojo IDE to 150 px:

The new size is showing up in the IDE

The IDE is at least showing the new height, the button is not redrawn, but we know that the IDE doesn’t always reflect all changes. So how does this look in our browser?

Sadly the changes are not reflected in the Web application. Changes in the style element don’t help either, as the height properties (and others related) are inherited by the general XojoButton parameters, which are not accessible through the style element.

CSS comes at our rescue!

Let’s go to our up settings section:

Put the following CSS Code into the HTML Header section. The <style></style> tags are important, as they are telling Xojo that what is written inside is CSS code:

.btn-group { height: 100%!important; width: auto!important; } .XojoButton { text-align: center!important; }
How the HTML Header has to look in the Xojo IDE.

Now let’s run our example again, et voilà, it is working:


Sign in or become a blog.xojoDOCs.com member to join the conversation.
Just enter your email below to get a log in link.

You’ve successfully subscribed to blog.xojoDOCs.com
Welcome back! You’ve successfully signed in.
Great! You’ve successfully signed up.
Your link has expired
Success! Check your email for magic link to sign-in.