Change Bootstrap Popup Menu Style

Targets Web
1

I would like to change how a popup menu is displayed in my Web app. Using the current Bootstrap theme, it looks like this after the user has selected something:
Screenshot1
which is hard to read. After the menu loses focus, it looks like this:
Screenshot2
I’d like it to look like this second case after the user has made a selection but before the control has lost the focus.

Even though I know very little CSS, I have tried messing around with the Bootstrap style definitions in the theme that I dropped into the app, but I can’t seem to find the right thing to change. Can anybody who has experience with the Bootstrap CSS help me find the right thing to change? Help would be much appreciated!

2

If you share a sample project that includes the bootstrap theme it will be easier to point you or help you with the changes.

3

Good idea; I should have done this. Here’s a link to a sample project:

testpopup

4

It looks like you shared only the project and not the bootstrap theme.
But it looks different than the default, so maybe is still using it?
image
Strange that looks different than what you posted. Maybe because the file is needed.

What Theme did you download from Bootswatch?

5

Sigh. I forgot that even though the theme is referenced in the project, it is not actually embedded IN the project. Here is a link to the theme I am using:

https://pomona.box.com/s/zgujmydo7l2jyybtoi1ow7ngfgip46iq

Thanks for your responses, Alberto.

6

I downloaded your Theme and it looks like is a Dark Mode only Theme.
This is the first time that I select the option to do not support Dark Mode and still shows as Dark Mode.
Do you have to change the page color to get the screenshot you posted?
This is what I get, even when I set my mac to Light Mode:
image

In other words, your sample project does not reproduce your screenshot on my computer.
Maybe there is an updated Theme where you downloaded it? It seems to be a bootstrap 5.1.3 theme and latest is 5.3.x

7

Thanks for the response. You are right. The problem arose when I had used a different background. I have posted a revised version of the project at the same link that will better display something more similar to my actual app: see below.

Screenshot 2024-05-06 at 11.57.50 AM

The point was that I liked the contrast this theme provided between the popup menu and the grey background, but wanted to change the theme so that menu when it has the focus has the same background color and border as when the menu does not have the focus instead of being transparent. But I did not know what to change in the theme CSS to do this (the Bootstrap CSS is really complicated!).

8

It looks like the CSS version that Xojo requires now is based on Bootstrap 5.3.x and your Theme is lacking some variables values (pure speculation from my tests).

Try this in you App HTMLHeader:

<style>
.XojoPopupMenu button.btn:focus { background-color: #375a7f !important; }
</style>

that will override the Xojo need to use Bootstrap variables that may not be part of your Theme.

Edit: I still think that if you can find your Theme updated for Bootstrap 5.3.x it will be better.

9

Thanks for the reply. But App HTMLHeader is read-only, so I can’t set it. (I will also look for an equivalent theme for Bootstrap 5.3.x, but that will take time.)

10

It is not read only. Here is where you modify the App.HTML.Header

image
image354×512 14.8 KB

and here is my edit showing what Alberto suggested
image

1 Like
11

Ah, thanks, that is what I was missing. Duh!

12

Thanks, Alberto and Tom! That does the trick.

1 Like