Fixed height of tabBox with scrollable content - css

Question

Is there a way to show scrollbars for the content in tabBoxes if I want to fix the height? Additionally, the scrollbar should only work for the content not the tab header itself. The closest I came to a solution was to fix the height of the .tab-content but this obviously highly depends on the height of the tabBox and the height of the tab header within. Resizing the window might cause the tab header to increase in size which causes this workaround to fail. Also, this would fix the height of all .tab-content elements, so if I wanted to create new tabBoxes with different heights, this also would not work.
This is a minimal example of my attempt to solve the problem. If you resize the window such that the second tab does not fit in the first row, the scrollbar and content do not work properly anymore.
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) {
}
)
}
Any help would be greatly appreciated.

Answer 1

The key is to add the css style overflow-y:scroll; to the div you need a scroll bar on. In this case, I have added it to a div within the first tabPanel by using:
div(style = 'overflow-y:scroll;', ...)
This requires that you wrap the objects that you want to scroll inside of a div().
I've edited your original example to show how to add scrolling to a large data table. also set the height to 500px manually in the same div so that you could see the scroll bar in action.
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)
}
)
}