固定高度的TabBox与可滚动内容

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你需要一个滚动条。在这种情况下，我已经用它添加到第一个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) 
    } 
) 
}