Changing the Height Of a WebButton in Xojo Web 2

Changing the Height Of a WebButton in Xojo Web 2

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

This will give you the following result in your browser:

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

The IDE is at least showing the new height, and 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 to our rescue!

Let’s go to our up settings section:

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

<style> .btn-group { height: 100%!important; width: auto!important; } .XojoButton { text-align: center!important; } </style>

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