Question

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

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

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上。在这种情况下，我已使用以下内容将其添加到第一个div中的tabPanel：

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)
    }
  )
}

使用可滚动内容固定tabBox的高度

1 个答案: