如何让Shiny的selectInput()突破bslib::navset_card_pill()边界显示？

要解决这个问题且不全局修改默认样式，你可以给目标navset_card_pill创建专属样式作用域，通过CSS后代选择器仅修改该卡片内的元素样式，具体实现如下：

完整代码示例 #

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

ui <- page_fluid(
  tags$head(tags$style(HTML("
    /* 仅对带有custom-nav-card类的容器内的卡片元素生效 */
    .custom-nav-card .bslib-card,
    .custom-nav-card .tab-content,
    .custom-nav-card .tab-pane,
    .custom-nav-card .card-body {
      overflow: visible !important;
    }
  "))),
  # 用自定义类的div包裹目标navset_card_pill
  tags$div(class = "custom-nav-card",
    navset_card_pill(nav_panel(
      title = "Overflow achieved!",
      selectInput("test", NULL, letters)
    ))
  )
)

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

shinyApp(ui, server)

方案说明 #

• 通过tags$div(class = "custom-nav-card")为目标卡片创建专属样式作用域，避免样式污染全局组件
• 使用CSS后代选择器.custom-nav-card ...，确保overflow: visible仅作用于该容器内的卡片相关元素
• 既实现了下拉框正常显示的需求，又保留了其他卡片组件的默认样式

更简洁的实现方式 #

无需额外div包裹，直接给navset_card_pill追加自定义类：

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

内容的提问来源于stack exchange，提问作者wurli