Scaling Web Buttons height

I have a Problem. In my Apps I was normally scaling WebButtons in Width and Height. Now it is only possible to scale the Width but not the Height. How can I scale the Height of a Webbutton?

2020R2.1 Linux, Webapp

I wrote this a few months ago. If you only need the height change you only need

.btn-group { height: 100%!important; }

Adding the width directive will make the button work like default Bootstrap buttons (and need the align center too), in other words the width will be set depending in the shown text. For example:
IDE
image

Web
image

I prefer to have buttons with same width accross the page, so just height is changed:

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

image

But there is always good to have options, some may want to have buttons that change the width depending on the text.

1 Like

@AlbertoD I’m not sure if you initial posting can be viewed by everyone, as it is in the testing area. All good points from you! I think the biggest issue for many is having to learn at least a tiny bit of CSS w/o being overwhelmed, that’s where I see the benefits of Xojo adding more style options, which I believe will come anyhow sooner or later.

@Jeannot_Muller yes the topic is in the testers area, I don’t know if I can move it now to the general web section. I will ask a mod to do it.

Edit: Thank you @Gavin_Smith for moving the topic.

1 Like

@AlbertoD I don’t know either, but my understanding so far ist that the testing threads keep being closed even after the official release. Moving should be possible for a mod though and it would be a pity if not more people can benefit from your excellent work!

1 Like

So it is not Wysiwyg anymore, I have to code for it. That I wanted to know cause it was before in 2019 r3.2 simply scaling and now this ability is lost. Okay, I will live with it.

1 Like

Youre right but this means also that UI Design is only possible when in the same moment youll write Code beside it. In Web 1.0 it was no problem to scale the button height. In Web 2.0 it is only possible when writing css. This is a Step back. Thats why I could not believe that it will be happened that it is affordable to write Code for small stuffs like this.

@Jeannot_Muller thanks for the advice and yes, this is the solution but in my oppinion it should be less complex for the users which are not experienced. It was a question asked by one my customers and I thought it should be nice to discuss on xojo.com

1 Like

Sure, all questions are valid :-).

As far as I remember, Xojo said that there might be more simplifications in future releases, aka something “WebStyle-ish”. Of course it is a step back in comparison. As the underlying framework of Web 2 in comparison to Web 1 is completely different, I understand that it means a complete re-development for Xojo.

As far as I’m concerned I’m happy that Xojo didn’t wait until the last and greatest feature is implemented, as there are many workarounds in place. Is it perfect: nope, not at all. I’m waiting as well for more features to come, and bugs to be fixed.

Is it usable? Yes, from my perspective. I have been able to develop many productive web apps with Web 2, but yes here and there with “workaorunds”. Some are saying it is a beta release. I would disagree. It might feel like a beta-release if you are trying to do exactly the same as with Web 1. That won’t work. I understand the frustration of many, but Xojo made that clear, that Web 2 is a complete different beast and re-engineered from scratch. Many new features made it into the release, but yes others are gone with the wind.

It is no question, your perspective is right. But. I think different in one point, couldn’t it be so that there would be both, 1 and 2? With a question at the beginning? Why? While we have tons of applications outside. Relying on xojo I have no chance to move this kind of apps at the moment cause they have between 30 and 100 MB Project size. That makes it really a problem for me. And that’s why I would think both frameworks would be the nicest Idea and it would be possible to do.

On the other side it is so that there are many different changes behind the curtains where you have within this process no documentation. For us it was so that we decided to write new projects in Java with GWT because there is in my oppinion no chance to live with it.

If it would be me, I would not care about. But the customers have their GUI on Xojo and asking, when will be there a new Version cause the old IDE is deprecated (there are showstoppers and nothing happened) and they ask, why we can not simply open with 2020 and compile. This chance would be there if there would be a more careful handling of the migration.

But yes: Web 2.0 is the rescue Point for the programmer cause it is less complex to program and you may have more fun in using xojo Web 2.0.

Early Xojo2020 tests allowed the IDE to put buttons taller than normal but when you ran the code the browser only showed the “standard” height, then they changed the Xojo IDE to only show the height that the button will show on the browser. So I think is easy for them to go back.

And for the code to make the browser show the button at the height that we want, the only change needed is from:

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

to

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

but Xojo needs to send that class for all buttons. I think is relatively easy but not following the design they are using. Because we can’t easily send CSS classes to Xojo controls we need to modify the App HTML Header to “mimic” this h-100 class behavior.

1 Like

Nevertheless this is symptomatic but on the other side: we have no other choice when using xojo.

Agree, though we might be missing the bigger picture and/or future plans on their plate. Not saying that you are wrong, it indeed looks like only a small change is needed, but we never know for sure.

I bet the idea to use btn-group is to allow other Bootstrap options and using h-100 for the btn-group may conflict with that (in the future).

I talked about the need for users to create taller buttons in the past and that bootstrap allows that with sizing classes (like h-100), I don’t know if Xojo plans to support that option, only time will tell. For now, it looks like we also need to know (some) CSS/Style and use code in the opening events, I didn’t know any CSS before playing with Web 2.0, now I know some and can adjust some parts of Web 2.0.

Yes, it isn’t too difficult, is it? Plus you have to deal with CSS anyways in all other Web programming languages, but far more. This said, I believe that Xojo can easily run into a big mess, if it is allowing too many style manipulations. That’s very likely their biggest concern. At least it would be mine: people pimping up web 2 app but then blaming Xojo … I think it is a difficult call where to draw the line. Nevertheless I’m convinced that we will see more options in the future.

1 Like