R shiny: relative css size for plotOutput not working

Question

The reference guide for shiny shows that the CSS relative size options are available for the plotOutput function. While the absolute measurement sizes have been working, I have not been able to successfully replicate the relative size units for the plot height. Note: The % units as well as "auto" work for the plot width, just not for height.

The following code has been pulled from the shiny gallery, and only the plot height has been modified. http://shiny.rstudio.com/gallery/faithful.html

server.R

shinyServer(function(input, output) {

  output$main_plot <- renderPlot({

    hist(faithful$eruptions,
         probability = TRUE,
         breaks = as.numeric(input$n_breaks),
         xlab = "Duration (minutes)",
         main = "Geyser eruption duration")

    if (input$individual_obs) {
      rug(faithful$eruptions)
    }

    if (input$density) {
      dens <- density(faithful$eruptions,
                      adjust = input$bw_adjust)
      lines(dens, col = "blue")
    }
  })
})

ui.R

shinyUI(bootstrapPage(

  selectInput(inputId = "n_breaks",
              label = "Number of bins in histogram (approximate):",
              choices = c(10, 20, 35, 50),
              selected = 20),

  checkboxInput(inputId = "individual_obs",
                label = strong("Show individual observations"),
                value = FALSE),

  checkboxInput(inputId = "density",
                label = strong("Show density estimate"),
                value = FALSE),

  plotOutput(outputId = "main_plot", height = "50%"),

  # Display this only if the density is shown
  conditionalPanel(condition = "input.density == true",
                   sliderInput(inputId = "bw_adjust",
                               label = "Bandwidth adjustment:",
                               min = 0.2, max = 2, value = 1, step = 0.2)
  )
))

When the absolute units are used for plot height, the browser console will show this for the plot div (the img source has been truncated for readability):

<div id="main_plot" class="shiny-plot-output shiny-bound-output" style="width: 100% ; height: 400px">
  <img src="data:image/png..." width="1920" height="400">
</div>

However, when the code above is used, the browser console shows the following for the plot div:

<div id="main_plot" class="shiny-plot-output shiny-bound-output" style="width: 100% ; height: 50%">
</div>

Nothing is populated in the main_plot div when a relative measure is used for the plot height. Is there another option that I am missing?

Versions:

R - 3.1.1 and Shiny - 0.10.1

As an aside, it would be nice to also have the remaining CSS relative measurements also implemented (specifically vh and vw) as per the w3 guide:

http://dev.w3.org/csswg/css-values/#relative-lengths

Answer 1

50% of what? The container you place the plot into needs to have a height to start with. Your container is responsive and adjusts to what you place in it. The following will work for example:

library(shiny)
runApp(list(
  ui = bootstrapPage(

    selectInput(inputId = "n_breaks",
                label = "Number of bins in histogram (approximate):",
                choices = c(10, 20, 35, 50),
                selected = 20),

    checkboxInput(inputId = "individual_obs",
                  label = strong("Show individual observations"),
                  value = FALSE),

    checkboxInput(inputId = "density",
                  label = strong("Show density estimate"),
                  value = FALSE),
    div(
      plotOutput(outputId = "main_plot", height = "50%")
    , style = "height: 300px; background-color: green;"),

    # Display this only if the density is shown
    conditionalPanel(condition = "input.density == true",
                     sliderInput(inputId = "bw_adjust",
                                 label = "Bandwidth adjustment:",
                                 min = 0.2, max = 2, value = 1, step = 0.2)
    )
  ),
  server = function(input, output) {

    output$main_plot <- renderPlot({

      hist(faithful$eruptions,
           probability = TRUE,
           breaks = as.numeric(input$n_breaks),
           xlab = "Duration (minutes)",
           main = "Geyser eruption duration")

      if (input$individual_obs) {
        rug(faithful$eruptions)
      }

      if (input$density) {
        dens <- density(faithful$eruptions,
                        adjust = input$bw_adjust)
        lines(dens, col = "blue")
      }
    })
  }
)) 

So in this case we have placed the plot in a div with a defined height and as expected the plot takes up 50%

div(plotOutput(outputId = "main_plot", height = "50%")
    , style = "height: 300px; background-color: green;")