Web 2.0 Style Tips

Targets Web
1

Warning: these changes work with Xojo2020r1, future features for Web 2.0 may conflict or these changes will not be needed. Please see the release notes and changes for the next release(s)

  1. Making the WebDialog show vertically centered

There is a Bootstrap class called .modal-dialog-centered that needs to be present on this Xojo code to vertically center the WebDialog. Currently, there is no way to tell Xojo that we want this instead of showing it at the top.

This is the code that needs to be changed:

<div class="modal-dialog mw-100" role="document" style="width: 354px;">

to

<div class="modal-dialog modal-dialog-centered mw-100" role="document" style="width: 354px;">

For me, there is no easy way to modify that line and be sure that Xojo will not refresh is removing my changes, so the idea here is to use modal-dialog class and set it to always be vertically centered. In other words, you can only have all the WebDialogs displaying at the top of the window or all displaying vertically centered. For that you just need to add this code to the App HTML Header

<style>
.modal-dialog {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - 1rem);
}
</style>
3 Likes
2

Bootstrap buttons show a focus ring with the same color as the button, so the Cancel and Regular buttons use btn-light and some people may not even know that the focus is set to that button.

Tip 2: change the buttons focus ring to use the same blue as other controls without the need to create a new bootstrap theme

In this case, you just need to add this code to the App HTML Header for your Web 2.0 app:

<style>
.btn-primary.focus, .btn-primary:focus { 
box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5); 
}
.btn-secondary.focus, .btn-secondary:focus { 
box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5); 
}
.btn-success.focus, .btn-success:focus { 
box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5); 
}
.btn-danger.focus, .btn-danger:focus { 
box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5); 
}
.btn-warning.focus, .btn-warning:focus { 
box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5); 
}
.btn-info.focus, .btn-info:focus { 
box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5); 
}
.btn-light.focus, .btn-light:focus { 
box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5); 
}
.btn-dark.focus, .btn-dark:focus { 
box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5); 
}
.btn-link.focus, .btn-link:focus { 
box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5); 
}
</style>

This will make your buttons show like this:
image

2 Likes
3

Some people will need to change the button height, it was easy to do with Web 1.0 but there is no easy way to control that with Web 2.0 within Xojo.

Tip 3: be able to create buttons in different heights

There is a Bootstrap class named ‘h-100’ that makes the element to use 100% of the defined height. We will need to add the h-100 class changing this line of code:

<div class="btn-group" style="width: 100%;">

to

<div class="btn-group h-100" style="width: 100%;">

There is no easy way (for me) to modify that and be sure that Xojo will not refresh the button and remove h-100, so my workaround is to modify the btn-group class. We just need to add this code to the App HTML Header code:

<style>
.btn-group {
    height: 100%!important;
}
</style>

With that code, we can define a button, say 100 x 100, and it will look like this:
image
the IDE shows it like this:
image

Feel free to post more tips here.

2 Likes
4

Thank you for these tips. Xojo will need a way of exposing these fine level controls at some point surely.

1 Like
5

These are great tips guys. Keep them coming as you discover additional style tips like this.

1 Like
6

I thought I saw a post here a few days ago that showed where to set the css class for a control in the inspector. Or am I just dreaming that?

7

How to implement those styles?

8

Go to: App on the left (navigator I think) then on the Inspector: Web Settings - HTML Header and add the one you want, for example the ability to have buttons in different heights:

<style>
.btn-group {
    height: 100%!important;
}
</style>
9

I mean, how to attach this styles to the button via code?

10

These styles ‘override’ the normal bootstrap CSS classes, so you just need to add them and they will be used instead of the default.

That’s why you need to decide if you want all your dialogs to work as default or all to be vertically centered, there is no way to have some one way and some the other.

With buttons height, there is no much problem because you just use the IDE and change the height and they will show on the web with the size you selected.

The focus ring for buttons is also an override, with default bootstrap rings is hard to see that the Cancel/Normal button has the focus, so I wanted all to have the same blue focus ring to make it clearer that they have the focus.

1 Like
11

Brock posted this code in another thread, thanks to you.

If you want to change the default gray color for the odd rows (WebListbox) you can add

<style>
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}
</style>

for even rows

<style>
.table-striped tbody tr:nth-of-type(even) {
    background-color: rgba(0, 0, 0, 0.05);
}
</style>

You just need to change the rgba values to what you need.

You can set both to the same values if you don’t want the alternate colors.

12

In another thread, someone said that they can no longer control the field height.

With Web 2.0 we have 2 options:
1.- use code in the opening event

me.Style.Value("height") = "100%"

2.- put a Style in the App HTML Header

<style>
.form-control {
    height: 100%!important;
}
</style>
13

It would be nice if you just can add an existing class to your objects to maintain your template. In my case I have a WebRectangle and I would like the background to be the same as the bg-primary class and in an ideal world I would just add this CSS class to my object.

So far I didn’t figure out how that can be done… This would be a great help for everyone I guess. You make you custom CSS or use the bootstrap and use it later on.