css - 具有可滚动内容的 tabBox 的固定高度

Question

如果我想固定高度，有没有办法为 tabBoxes 中的内容显示滚动条？此外，滚动条应该只适用于内容而不是选项卡标题本身。我最接近的解决方案是修复 .tab-content 的高度，但这显然在很大程度上取决于 tabBox 的高度和其中的选项卡标题的高度。调整窗口大小可能会导致选项卡标题的大小增加，从而导致此解决方法失败。此外，这将固定所有 .tab-content 元素的高度，因此如果我想创建具有不同高度的新 tabBoxes，这也行不通。

这是我尝试解决问题的一个最小示例。如果您调整窗口大小，使第二个选项卡不适合第一行，则滚动条和内容将不再正常工作。

if (interactive()) {
  library(shiny)

  body <- dashboardBody(
    tags$head(tags$style(HTML(".nav-tabs-custom { overflow-y: hidden; } .nav-tabs-custom>.tab-content { overflow-y: auto; height: 100px; }"))),
    fluidRow(
      tabBox(
        height = "150px",
        tabPanel(
          title = "Tab Header 1 - Scrollbar failing when resizing",
          p("Test 1"),
          p("Test 2"),
          p("Test 3"),
          p("Test 4"),
          p("Test 5")
        ),
        tabPanel(
          title = "Tab Header 2 - looooooooooooooooong",
          p("Test 1"),
          p("Test 2")
        )
      )
    )
  )

  shinyApp(
    ui = dashboardPage(dashboardHeader(disable = TRUE), dashboardSidebar(disable = TRUE), body),
    server = function(input, output) {
    }
  )
}

如有任何帮助，我们将不胜感激。

Answer 1

关键是将 css 样式 overflow-y:scroll; 添加到您需要滚动条的 div。在这种情况下，我已将它添加到第一个 tabPanel 中的 div，方法是:

div(style = 'overflow-y:scroll;', ...)

这要求您将要滚动的对象包装在 div() 中。

我已经编辑了您的原始示例以展示如何向大型数据表添加滚动。还在同一 div 中手动将高度设置为 500px，这样您就可以看到滚动条在起作用。

if (interactive()) {
  library(shiny)

  body <- dashboardBody(
    fluidRow(
      tabBox(
        tabPanel(
          title = "Tab Header 1 - Scrollbar failing when resizing",
          div(style = 'overflow-y:scroll;height:500px;',
            tableOutput('largedata')
          )

        ),
        tabPanel(
          title = "Tab Header 2 - looooooooooooooooong",
          p("Test 1"),
          p("Test 2")
        )
      )
    )
  )

  shinyApp(
    ui = dashboardPage(dashboardHeader(disable = TRUE), dashboardSidebar(disable = TRUE), body),
    server = function(input, output) {
      output$largedata <- renderTable(mtcars)
    }
  )
}