Flexdashboard侧边栏pickerInput溢出与纵向滚动兼容问题

要同时实现侧边栏纵向滚动和pickerInput长内容不截断，需要调整侧边栏的overflow属性，并修改pickerInput下拉菜单的定位规则，具体如下：

关键CSS修改 #

替换原有侧边栏样式为以下代码：

.section.sidebar.my-class {
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: visible;
  z-index: 10;
}

/* 确保pickerInput下拉菜单不被侧边栏裁剪 */
.section.sidebar.my-class .dropdown-menu {
  position: fixed;
  z-index: 9999;
}

代码说明 #

• max-height: 100vh：限制侧边栏高度不超过浏览器视口，避免内容无限延伸
• overflow-y: auto：当输入框数量超出视口高度时，自动显示纵向滚动条
• overflow-x: visible：保留横向内容的可见性，避免长选项文本被截断
• .dropdown-menu设置为position: fixed：让pickerInput的下拉菜单脱离侧边栏容器的限制，不会被侧边栏的overflow属性裁剪，高z-index确保菜单显示在最上层

修改后的完整代码 #

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


```{r setup, include=FALSE}
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)

.section.sidebar.my-class {
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: visible;
  z-index: 10;
}

.section.sidebar.my-class .dropdown-menu {
  position: fixed;
  z-index: 9999;
}

Filters #

pickerInput(
  inputId = "name1",
  label = "test",
  choices = df$Name,
  selected = df$Name)

pickerInput(
  inputId = "name2",
  label = "test",
  choices = df$Name,
  selected = df$Name)

pickerInput(
  inputId = "name3",
  label = "test",
  choices = df$Name,
  selected = df$Name)

pickerInput(
  inputId = "name4",
  label = "test",
  choices = df$Name,
  selected = df$Name)

pickerInput(
  inputId = "name5",
  label = "test",
  choices = df$Name,
  selected = df$Name)

pickerInput(
  inputId = "name6",
  label = "test",
  choices = df$Name,
  selected = df$Name)

pickerInput(
  inputId = "name7",
  label = "test",
  choices = df$Name,
  selected = df$Name)

pickerInput(
  inputId = "name8",
  label = "test",
  choices = df$Name,
  selected = df$Name)

pickerInput(
  inputId = "name9",
  label = "test",
  choices = df$Name,
  selected = df$Name)

pickerInput(
  inputId = "name10",
  label = "test",
  choices = df$Name,
  selected = df$Name)

pickerInput(
  inputId = "name11",
  label = "test",
  choices = df$Name,
  selected = df$Name)

pickerInput(
  inputId = "name12",
  label = "test",
  choices = df$Name,
  selected = df$Name)

Row #

filtered_data <-
    reactive ({
      req(input$name1)

      df %>%
        filter(Name %in% input$name1) 

    })

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`的`inputId`设置为唯一值（示例中已修改为`name1`到`name12`），避免Shiny应用出现输入ID冲突的问题。

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