The dilemma:
My issue is that the selectInput() in my code gets 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)
https://i.sstatic.net/OfsWM.png
A workaround using card():
To tackle this issue, I've opted to use card(), which allows for a custom class setting for the card and card body. However, navset_card_pill() and nav_panel() do not provide this option, rendering this specific solution ineffective.
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)
https://i.sstatic.net/qdtxP.png
Update #1
After some tweaking, I've devised a solution that entails adjusting multiple css classes in the following manner:
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)
))
)
Although effective, I would prefer to achieve this functionality without altering the 'global' defaults for these classes across my application.