WebPopupMenu Item CSS

Targets Web
1

reviving a quite old post here.

but my CSSfu is quite light…

how can I change the selection color of the dropdown popupmenu ?
default color is bootstrap “light” for the menu, it’s ok for me
but when I choose a line in the menu, the selected line becomes bootstrap primary and
so the text is not visible …

thanks.

2

The CSS classes you want to target are:

.dropdown-item.active, .dropdown-item:active

The rule for this is the following in the default Xojo theme:

.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #007bff;
}
2 Likes
3

thanks @Anthony_G_Cyphers , but putting this in the app html header does nothing in any dropdown menu I have in the app.

Capture d’écran 2021-09-12 à 13.37.01
Capture d’écran 2021-09-12 à 13.37.10

setting the text in white while selected would be a good option too.

4 
.dropdown-item:focus, .dropdown-item:hover {
    color: #16181b;
    text-decoration: none;
    background-color: #ff0000;
}
1 Like
5

Here are the relevant bits from the built-in Xojo theme:

.dropdown-item{
    display:block;
    width:100%;
    padding:.25rem 1.5rem;
    clear:both;
    font-weight:400;
    color:#212529;
    text-align:inherit;
    white-space:nowrap;
    background-color:transparent;
    border:0
}
.dropdown-item:focus,.dropdown-item:hover{
    color:#16181b;
    text-decoration:none;
    background-color:#e9ecef
}
.dropdown-item.active,.dropdown-item:active{
    color:#fff;
    text-decoration:none;
    background-color:#007bff
}
.dropdown-item.disabled,.dropdown-item:disabled{
    color:#6c757d;
    pointer-events:none;
    background-color:transparent
}
.dropdown-menu.show{
    display:block
}
.dropdown-header{
    display:block;
    padding:.5rem 1.5rem;
    margin-bottom:0;
    font-size:.875rem;
    color:#6c757d;
    white-space:nowrap
}
.dropdown-item-text{
    display:block;
    padding:.25rem 1.5rem;
    color:#212529
}
6

this one works fine to change the background color of the menu item when I hover it
how can I leave the original color (it was primary) and set the text color to white ?

7

For whatever reason, the text color is set explicitly on the a element within the menuitem. This should get you what you need:

.dropdown-item:focus, .dropdown-item:hover {
    text-decoration: none;
    background-color: #f00;
}
.dropdown-item:focus > a, .dropdown-item:hover > a {
    color: #fff !important;
}
8

can you use text-white instead of #ffffff, and bg-primary instead of #ff0000 ?
also when I have a bootstrap icon on a menu line, it stays in black color. the text is ok in white
how can I have the bootstrap icon also in white ?

sorry I’m “pro” with xojo, but full beginner with css !

9

can you use text-white instead of #ffffff, and bg-primary instead of #ff0000

You can use the CSS var() function to return the global values that are defined in the stylesheet.

.dropdown-item:focus, .dropdown-item:hover {
    text-decoration: none;
    background-color: var(--primary);
}
.dropdown-item:focus > a, .dropdown-item:hover > a {
    color: var(--white) !important;
}

how can I have the bootstrap icon also in white ?

Though I don’t know what method you’re using to add the icon to the PopupMenu item, you would likely have to do that when generating the icon. WebPicture — Xojo documentation

You could potentially use CSS filters on the icon, but that’s not something I’m going to get involved with here.

2 Likes
10

I remember @Greg_O_Lone said you can’t change the color of a bootstrap icon once generated. you can choose one color and that’s all. I should use Fontawesome for that.