Shinydashboard Tabbox Height

Question

I'm trying to create a tabBox that spans the entire mainPanel. I'm able to get the width to span the entire screen but I'm unable to get the height to do the same. I do not wish to use absolute values in pixels (or some other unit) since I expect the app to be used across different screens.

I played with the example and an example of the modified tabBox is as 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
    )

Answer 1

You can use the vh css unit that is defined as 1% of viewport height and then basically follow the example in this answer where you set the relative height in the 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. With 100% goes slightly over the bottom edge because of the header. Around 90% seems to work fine.