Shiny Dashboard多标签页放置大尺寸图表时页面无法滚动如何解决

问题说明 #

ShinyDashboard默认内容容器未开启自动滚动，当页面内容高度超出浏览器视口时，会出现无法向下滚动、下方内容被截断的情况，复现问题的核心代码如下：

dashboardBody(
        tabItems(
            tabItem(tabName = "total_barplot_tab",
                    fluidRow(
                            box(plotlyOutput("total_barplot"),width = "100%"),
                            box(plotlyOutput("total_barplot_2"),width = "100%")))))

解决方法 #

在dashboardBody最前端添加自定义CSS，重置内容容器的滚动属性即可，配置后所有标签页自动支持垂直滚动，修改后代码如下：

dashboardBody(
  # 全局滚动配置
  tags$style(HTML("
    .content-wrapper, .right-side {
      overflow-y: auto;
    }
  ")),
  tabItems(
    tabItem(tabName = "total_barplot_tab",
            fluidRow(
              # shinydashboard基于12列栅格布局，占满整行直接传width = 12即可，无需传字符串"100%"避免布局异常
              box(plotlyOutput("total_barplot"), width = 12),
              box(plotlyOutput("total_barplot_2"), width = 12)
            )
    )
    # 其余标签页按原有逻辑追加即可，无需额外滚动配置
  )
)

可选配置 #

如果不需要全局开启滚动，仅要单个标签页支持滚动，可以给对应tabItem的内容外层套一层带滚动样式的div：

tabItem(tabName = "target_tab",
  div(
    style = "overflow-y: auto; height: calc(100vh - 60px);",
    # 该标签页原有内容放在此处
  )
)

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