0

The issue:

My problem is that my selectInput() is cut off by the lower border of the card:

library(shiny) # Version 1.7.4
library(bslib) # Version 0.5.0

ui <- page_fluid(
  navset_card_pill(nav_panel(
    title = "No overflow :(",
    selectInput("test", NULL, letters)
  ))
)

server <- function(input, output, server) {}

shinyApp(ui, server)

enter image description here

A solution with card():

I've managed to solve the problem using card(), as this allows you to set a custom class for the card/card body. However navset_card_pill() and nav_panel() don't allow this, so this particular solution doesn't carry over.

ui <- page_fluid(
  tags$head(tags$style(HTML("
    .foo {
      overflow: visible !important;
    }
  "))),
  
  card(
    class = "foo",
    selectInput("test", NULL, letters),
    wrapper = function(...) card_body(..., class = "foo")
  )
)

server <- function(input, output, server) {}

shinyApp(ui, server)

enter image description here

Edit #1

I've now found a solution which involves modifying several css classes as follows:

ui <- page_fluid(
  tags$head(tags$style(HTML("
    .bslib-card, .tab-content, .tab-pane, .card-body {
      overflow: visible !important;
    }
  "))),
  navset_card_pill(nav_panel(
    title = "Overflow achieved!",
    selectInput("test", NULL, letters)
  ))
)

This isn't ideal though - ideally I'd like to achieve this behaviour without modifying 'global' defaults for these classes throughout my app.

wurli
  • 2,314
  • 10
  • 17

1 Answers1

1

If you use shinyWidgets::pickerInput, you can let the dropdown overflow by setting options = list(container = "body")

shinyWidgets::pickerInput("test", NULL, letters, options = list(container = "body"))
msorlien
  • 11
  • 2