Input Selectize render issues on superhero theme

[adampinky85]

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:

• Previously it renders with a white background and selected elements with a nice grey boarder in the selection field.
• Currently it renders with the theme background colour, the selected elements have the same colour, there is a white line between selected fields, and the selected fields are not easily visible.

Versions:
shiny: 0.8.1
shinyswatch: 0.5.1

Minimal Example:

import shiny
import shinyswatch


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,
        ),
    )
)

app = shiny.App(UI, server)

[Garrick Aden-Buie]

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 the bg 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.

[adampinky85]

Hi team, is there any update on fixing this issue? We would really appreciate being able to upgrade to the new versions. Many thanks!

[adampinky85]

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

[Carson Sievert]

@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)

[adampinky85]

Great thanks @cpsievert, much appreciated!