Styling Tagify Dropdown

I have tried all of the Tagify Settings in the Properties Panel but can't figure out how to style the drop menu background colour to match the site branding. What am I missing?

Match the site branding to the drop menu background. :rofl: :joy:

Alternatively, try one of these selectors:

  • .tagify__dropdown
  • .tagify__dropdown__item
  • .tagify__dropdown__item--active
2 Likes

Thanks for pointing me in the right direction @ben ! I managed to get it to work. Again, mush appreciated for the direction. :beers:

.tagify__dropdown__item:hover 
{ background-color: var(--bs-warning); color: var(--bs-body-color); }
1 Like

Certain classes in Wappler (like Bootstrap) very often take precedence over our own styling definitions/desires. You can use the developer tools in the browser to see the calculated styling (and stylesheet) being applied to elements in the page. That helps figure out which style definitions are and are not being applied.

In your own CSS, you may need to be very specific about the element you want to style, and even include '!important' at the end of the style property. So if you really wanted to make the drop down background color match the site branding, it is possible. It just takes a little more debugging to figure out how to get your style to override CSS that Wappler imports.

1 Like

Have a look at this if you are fair dinkum about proper styling with Bootstrap: