cssrshinybslib

How to allow selectizeInput in bslib to overlap card?

The default stylesheets of bslib allow for dateInputs and other similar kinds of widgets to overlap the boundaries of the card containers, but not select(ize)Inputs (so far as I can see).

I've tried adjusting the css position, z-index, and other parameters via bs_add_rules() for .selectize-dropdown and .selectize-dropdown-content, but have had no luck in altering the overlap behavior. I think I'm missing something simple, or else not understanding the css conflicts.

In short, how can I get selectizeInput to behave like dateInput with respect to z-indexing (i.e. to overlap the box(es), rather than force an overflow with card-internal scrolling)?

Here's a basic reprex:

library(shiny)
library(bslib)

ui <- page_sidebar(
  underline = F,
  theme = bs_theme(
    version = 5,
    font_scale = .8,
    bootswatch = "united",
    base_font = font_google("Roboto"),
    code_font = font_google("JetBrains Mono"),
    heading_font = font_google("Prata")
  ),
  title = "Z-index test",
  sidebar = "",
  card(
    fill = F,
    selectizeInput("test_input", "Letters: ", choices = LETTERS)
  ),
  card(
    fill = F,
    dateInput("test_date", "Dates")
  )
)

shinyApp(ui, function(input, output) {})

Session info:

shiny         1.8.0
bslib         0.6.1

Thanks!

Solution

  • The issue is solved by changing the css of card and cardbody:

    library(shiny)
library(bslib)

ui <- page_sidebar(
  underline = F,
  theme = bs_theme(
    version = 5,
    font_scale = .8,
    bootswatch = "united",
    base_font = font_google("Roboto"),
    code_font = font_google("JetBrains Mono"),
    heading_font = font_google("Prata")
  ),
  title = "Z-index test",
  sidebar = "",
  card(
    fill = F,
    style = "position:relative; z-index:1000;",
    selectizeInput("test_input", "Letters: ", choices = LETTERS)
  ),
  card(
    fill = F,
    dateInput("test_date", "Dates")
  ),
  tags$head(tags$style('.card{overflow: visible !important;}'),
            tags$style('.card-body{overflow: visible !important;}'))
)

shinyApp(ui, function(input, output) {})