Tab Shinydashboard Height
I am trying to create tabBox
one that covers the whole mainPanel
. I can get the width to cover the entire screen, but I can't get the height to do the same. I don't want to use absolute values in pixels (or some other devices) as I expect the app to be used across different screens.
I have played with the example and an example of the modified is tabBox
given below
fluidRow(
tabBox(
title = "First tabBox",
# The id lets us use input$tabset1 on the server to find the current tab
id = "tabset1", height = "450px",
tabPanel("Tab1", "First tab content"),
tabPanel("Tab2", "Tab content 2"),
width = 12
),
height = '20%',
width = 12
)
You can use a vh
css block that is defined as 1% of the viewport height , and then basically follow the example in this answer where you set the relative height in css:
fluidRow(
tabBox(
tags$head(
tags$style(HTML(" #tabBox { height:90vh !important; } "))
),
id="tabBox",
title = "tabBox",
width = 12
)
You can of course also put this in an external css file, especially if you are going to do more than one of these css tricks. At 100% it goes slightly above the bottom margin due to the title. It seems to work about 90%.