Open adampinky85 opened 4 months ago
Thanks for the report @adampinky85!
Internal notes: the problem is that we use --bs-tertiary-bg
in the selectize styles,
.selectize-dropdown .active:not(.selected) {
background: var(--bs-tertiary-bg);
color: var(--bs-body-color)
}
but from what I can tell Bootswatch hasn't yet (or hasn't in the release we bundle) customized the tertiary colors for its themes.
In the Bootstrap docs, the tertiary colors are described as
Tertiary — Use the
color
option for even lighter text. Use thebg
option to style backgrounds for hover states, accents, and wells.
So while our use of --bs-tertiary-bg
is technically correct, it doesn't work across all Bootswatch themes. We could report this upstream, patch in bslib or here in shinyswatch, or adjust the selectize styles in shiny.
Hi team, is there any update on fixing this issue? We would really appreciate being able to upgrade to the new versions. Many thanks!
Hi @gadenbuie, appreciate the team is very busy, is there anyone that could take at look at this issue? We've upgraded to the latest versions but it does not appear to be resolved. Thanks!
Versions: shiny: 0.10.2 shinyswatch: 0.6.1
@adampinky85 we may not get a fix out for a while, but in the meantime, you can workaround it by adding CSS like this to your app:
import shinyswatch
import shiny
def server(_, __, ___):
"""Shiny main server"""
UI = shiny.ui.page_navbar(
shinyswatch.theme.superhero(),
shiny.ui.nav_panel(
"dashboard",
shiny.ui.input_selectize(
"id",
"labels",
[1, 2, 3, 4],
multiple=True,
),
),
header=shiny.ui.tags.style(
"""
.selectize-input {
--bs-emphasis-color: white;
--bs-emphasis-color-rgb: 255, 255, 255;
}
.selectize-dropdown .active:not(.selected) {
background-color: #DF6919;
color: white
}
"""
),
)
app = shiny.App(UI, server)
Great thanks @cpsievert, much appreciated!
Hi team,
We are using the Superhero theme which is really great!
Following upgrading from shiny 0.7.1 to 0.8.1 the input selectize ui element no longer renders correctly:
Versions: shiny: 0.8.1 shinyswatch: 0.5.1
Minimal Example: