5

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
    )
TheComeOnMan
  • 12,535
  • 8
  • 39
  • 54

1 Answers1

5

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.

Community
  • 1
  • 1
FvD
  • 3,697
  • 1
  • 35
  • 53
  • Thanks! I will try this out later in the day and get back to you. Any idea why height = "100%" doesn't work though? – TheComeOnMan Aug 08 '15 at 01:01
  • I just checked the solution and while it worked for the `tabbox`, it doesn't seem to be generally applicable. For instance, there's a `height = 400px` added to plots which seems to overrides the height I specify in the `tag` function. – TheComeOnMan Aug 08 '15 at 10:18
  • Yes, if you choose a fixed height of 400px, then that will be the fixed height of the plot. I'm sure you can make you plot relative to the view height as well in the same way as above. If you need to mix them, then it will require some experimentation to see how to mix and match portions that you want be relative, and portions that you want of a fixed height. – FvD Aug 10 '15 at 13:22