flexdashboard侧边栏shinyWidgets pickerInput宽度溢出问题求助

在flexdashboard的侧边栏使用shinyWidgets::pickerInput时，若选项文本过长，会被侧边栏宽度截断，导致无法完整查看选项内容、选中状态及「取消全选」按钮。虽然文本截断的临时方案能显示操作按钮，但无法查看完整选项内容，我们可以通过自定义CSS实现下拉框溢出侧边栏到页面主体区域的效果。

解决方案 #

核心思路是调整侧边栏和下拉菜单的样式规则，让下拉菜单脱离侧边栏的约束：

• 取消侧边栏的溢出隐藏限制，允许内容向外延伸
• 修改下拉菜单的定位方式，使其可以覆盖页面主体区域
• 提高下拉菜单的层级，避免被其他页面元素遮挡

修改后的完整可运行代码 #

---
title: "TEST"
runtime: shiny
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    
---

library(dplyr)
library(shiny)
library(DT)
library(shinyWidgets)

Name <- c("LONNGGGGGGGGGGGGGGG TEXXTTTTTTTTTTTTTTTTTT", "Bill", "Maria", "Ben", "Tina")
Age <- c(23, 41, 32, 58, 26)
df <- data.frame(Name, Age)

# 注入自定义CSS解决下拉框截断问题
tags$style(HTML("
  .sidebar {
    overflow: visible !important; /* 解除侧边栏的溢出隐藏限制 */
  }
  .bootstrap-select .dropdown-menu {
    position: fixed !important; /* 固定定位，脱离侧边栏布局约束 */
    max-width: none !important; /* 取消最大宽度限制，自适应选项内容宽度 */
    z-index: 9999 !important; /* 提高层级，确保下拉框显示在最上层 */
    left: auto !important; /* 自动适配触发按钮位置，避免偏移 */
  }
"))

Filters #

pickerInput(
  inputId = "name",
  label = "test",
  choices = sort(unique(df$Name)),
  selected = sort(unique(df$Name)),
  multiple = TRUE,
  options = list(
    `actions-box` = TRUE,
    `selected-text-format` = paste0("count > ", length(sort(unique(df$Name))) -1),
    `count-selected-text` = "All Selected"
  )
)

Row #

filtered_data <- reactive ({
  req(input$name)
  df %>% filter(Name %in% input$name) 
})

renderDataTable(filtered_data(), class = 'cell-border stripe',
                extensions = 'Buttons',
                rownames = FALSE,
                options = list(
                  columnDefs = list(list(className = 'dt-center',width = '100px', targets = "_all"))),
                fillContainer=TRUE)

效果说明 #

修改后，点击pickerInput的下拉按钮时，下拉菜单会突破侧边栏的宽度限制，完整显示所有长文本选项，同时「全选/取消全选」按钮和选中状态也能正常展示，不会被截断。

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