Web 2.0 controls - CSS class?

Louis_D · February 18, 2021, 4:32pm

So, I am still rewriting a web application in Web 2.0. I am gradually working out issues and while my application is still not production capable (webcontainers just don’t render fast enough, among other things), it is inching towards that goal.

Now, some issues remain with styling. I was able to design my CSS classes such that my buttons (default, primary and primary-alternate, which can be set with a bit of javascript - Thank you @Anthony_G_Cyphers for that post!) look and behave (hover, disable, etc.) pretty much the way I want. Popupmenus are somewhat of a challenge. I can manage the behavior of the pull down menu with the dropdown-menu CSS class, but the button part itself still resists me. Does anyone know the CSS class involved here, and more generally, what are the classes that correspond to Xojo controls? - or if this is documented somewhere, please point me in the right direction!

Thanks in advance.

Anthony_G_Cyphers · February 18, 2021, 4:42pm

What you’re looking for is the dropdown-item class, but Xojo does some magic under the hood that calculates some of these properties. I’ve not attempted to customize them myself in the built-in Xojo PopupMenu, so please report back with how you do.

Anthony_G_Cyphers · February 18, 2021, 4:48pm

You might eventually need to add some CSS to your custom theme. Something like:

.XojoPopupMenu.dropdown li.dropdown-item span {
  color: #f00;
}

Which should set the text color of all PopupMenu items to red. Untested browser code.

Louis_D · February 18, 2021, 4:49pm

Thank you Anthony!

I shall investigate in this direction.

Incidentally for the record and everyone’s benefit, Anthony’s Graffiti Web Button solved my ongoing issue with image buttons. It works like a charm (once you read the documentation all the way down, which I did not do at first. ).

Anthony_G_Cyphers · February 18, 2021, 5:15pm

Pesky documentation. Pffft. Nobody reads that stuff.

Louis_D · February 18, 2021, 6:23pm

I was able to manage the popupmenu items with dropdown-menu, .dropdown-item .dropdown-item:focus, .dropdown-item:hover and so on. What I am still unable to do, is control the styling of the popupmenu inactive, hovered, active.

It would be very useful if Xojo were to publish a correspondence. It is after all supposed to be a RAD tool. There is nothing RAD about sifting through thousands of lines of arcane theme items to figure out through trial and error, which one we should edit.

feedback://showreport?report_id=63727

Anthony_G_Cyphers · February 18, 2021, 6:35pm

The PopupMenu itself is a Button with Bootstrap btn classes. You could do something like this in its Shown event:

ExecuteJavascript( "$('#" + myPM.ControlID + "_button').removeClass('btn-light').addClass('btn-primary');" )

To switch it to a Primary button (same as the Indicator property).

Or, to switch its background color:

ExecuteJavascript( "$('#" + myPM.ControlID + "_button').css('background-color', '#f00')" )

Anthony_G_Cyphers · February 18, 2021, 6:44pm

You could modify Hover behavior like this. Add this to the Shown event:

ExecuteJavascript( "$('#" + myPM.ControlID + "_button').addClass('myCustomButton');" )

Then, in App.HTMLHeader (or in your custom theme):

<style>
  button.btn.myCustomButton:hover {
    background-color: #f00;
  }
</style>

Louis_D · February 18, 2021, 6:53pm

Indeed, the popupmenu responds to indicators (other than default) and behaves accordingly with the CSS theme defined for these buttons. It just will not abide by the default theme (btn). The above code works with any other indicator than default. I guess that I will work around the problem by using one of the other indicators (and corresponding CSS configuration) as my default. Or as you suggest, copy the btn class into my own and assign this one instead.

All other buttons, including your own Graffiti Web Button, behave predictably.

We really need this correspondence table. With comments for oddball issues such as the popupmenu.

Anthony_G_Cyphers · February 18, 2021, 6:55pm

I doubt you’ll get it. Most of this can be mined out of the browser’s inspector quite easily by simply right-clicking an object in the browser then selecting “Inspect”.

Louis_D · February 18, 2021, 7:12pm

Well, I’ll be… I was there several times, but did not see it right in front of me.

button type=“button” id=“KIj8G4_button” class=“btn btn-light dropdown-toggle” data-toggle="dropdown"

Once again, Anthony, I owe you one! Hopefully this is going to be useful to others also.
I still maintain that a table is easier than digging through individual web pages, even if it is relatively easy.

Anthony_G_Cyphers · February 18, 2021, 7:18pm

Happy to help!

Louis_D · February 19, 2021, 1:13pm

After tweaking the attributes of the 4 classes involved in the popupmenu, I was able to have it my way. inactive, hover, active, dropdown. everything is now coherent.

Louis_D · February 20, 2021, 1:38pm

The case was closed. Since I cannot answer in Feedback, I will do it here.

This case has been closed because it has been decided that this feature will not be implemented.
If you want to design a custom theme, you should be using the default Bootstrap 4 CSS as a reference.

While not unexpected, this is sad. Not because you closed it, @Greg_O_Lone, but because you missed the point entirely. There is not one serious developer that will use the default Bootstrap theme as-is and the answer completely overlooks the issue that one has to figure out the hard way (one control at a time) what elements and or classes need to be customized once the general theme was set-up.

Greg_O_Lone · February 20, 2021, 2:54pm

I didn’t miss your point.

We use pure bootstrap 4 controls so that you can use other themes that already exist and quite frankly there’s no practical way that we could document all of the selectors in a bootstrap theme anyway.