[h]The problem: I want to be able to create buttons in different heights[/h]
I think the Web is about being free to create anything we want, or what our clients want, as fast as possible and I selected Xojo because there are many things that Xojo allows me to do very easily and fast. One of those things: changing the button height
Now that we are changing to Bootstrap, we are being limited to the default Bootstrap Button Height and there is no way to change that in Xojo. I don’t want to be limited to the bootstrap theme, I don’t want to create a new bootstrap theme for simple things, and if I modify the bootstrap theme, all the buttons will have the same height, so that’s not an option.
Yesterday I had a Zoom meeting and we talked about this. I said: I need Xojo to allow me to put the “h-100” class to the btn-group div, so this code:
<div class="btn-group" style="width: 100%;">can be changed to:
<div class="btn-group h-100" style="width: 100%;">that will allow me to use the IDE to set the button height and when I run the app the button will be as tall as I set it.
I don’t see that happening any time soon, so I kept thinking about my “problem”.
I already did some tests trying to add “h-100” to the buttons and for other tests (with labels) I know that Xojo can remove this extra code because it is not part of the framework.
[h]A new idea: use CSS[/h]
I guess people with CSS experience can think of this before trying to use JQuery or other code to change Styles, but I don’t know much about CSS and @Brock Nash code helped me to add some classes to buttons and labels, the problem is the btn-group div doesn’t have an ID, the code needs one to be able to identify where a class will be added.
So CSS to the rescue. I visited bootstrap page, inspected an “h-100” element, and found that the “h-100” code is only:
.h-100 {
height: 100%!important;
}
If the only thing I need to add to div class="btn-group" is height: 100%!important; could it work if I create a CSS file with this code?
.btn-group {
height: 100%!important;
}
I added the code to mystyle.css, uploaded to dropbox and put this code in App HTML Header:
<link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/ohlachupw3j4jaq/mystyle.css">and here is the result:
[h]How about proportional size buttons?[/h]
I think @Tim Parnell talked about having buttons where the width change according to the caption. The problem that we have is that this code:
<div class="btn-group" style="width: 100%;">is setting the width at 100% always, can a CSS instruction override that?
After reading bootstrap page, it looks like: if we don’t use the width: 100% in fact we are using width: auto, so I added this code to mystyle.css:
width: auto!important;inside the .btn-group CSS
the result:
This is how the IDE looks just before running:
[h]Fixing the button left alignment[/h]
As you can see, the buttons are drawn left-aligned, this could make sense sometimes but I think most of the time is better to have the buttons centered within the area we define.
After some tests, I found that we need this CSS code too:
.XojoButton {
text-align: center!important;
}
I added the code to mystyle.css and here is the result:
[h]Conclusion[/h]
Knowing a little CSS can help you fine-tune your web app. Having the option to easily change some things without affecting Xojo’s web framework is great. This is why I push the convenience to have a CSS editor within Xojo, not to change bootstrap Theme as a whole but just to be able to create everything that our clients need without investing hours doing so. The CSS editor will create a Styles.css file just like what I’m using without touching the bootstrap theme.
This is the code I added to mystyle.css:
.btn-group {
height: 100%!important;
width: auto!important;
}
.XojoButton {
text-align: center!important;
}
I hope this helps someone or at least give ideas on what can be done without changing bootstrap theme or Xojo changing the framework.