Shinydashboard box does not scale with its reactive content

Question

I have a shinydashboard with a plot that is surrounded by a box. The height of the plot depends on an input and is set in height within renderPlot. Now I want the box to increase and decrease with the height of the plot, that the plots fits in the box. The argument height in box has the following description:

The height of a box, in pixels or other CSS unit. By default the height scales automatically with the content.

Unfortunately this is not the case. Here is a (nonsense) minimal example:

library(shiny)
library(shinydashboard)

# Define UI for application that draws a histogram
ui <- dashboardPage(
   
   dbHeader,
   # Sidebar with a slider input for number of bins 
      dashboardSidebar(
         sliderInput("bins",
                     "Number of bins:",
                     min = 1,
                     max = 50,
                     value = 30)
      ),
      
      # Show a plot of the generated distribution
      dashboardBody(
         box(plotOutput("distPlot"), 
             solidHeader = TRUE,
             status = "primary",
             title = "Box",
             background = "red")
      )
   
)

# Define server logic required to draw a histogram
server <- function(input, output) {
   
   observe({output$distPlot <- renderPlot({
      # generate bins based on input$bins from ui.R
      x    <- faithful[, 2] 
      bins <- seq(min(x), max(x), length.out = input$bins + 1)
      
      # draw the histogram with the specified number of bins
      hist(x, breaks = bins, col = 'darkgray', border = 'white')
   }, height = input$bins*10)})
}

# Run the application 
shinyApp(ui = ui, server = server)

Am I doing something wrong? Or is there a workaround?

Answer 1

You are not adjusting the height of box according to input$bins. If you do that using renderUI, it works. Try this

library(shiny)
library(shinydashboard)

# Define UI for application that draws a histogram
ui <- dashboardPage(
  
  dashboardHeader(),
  # Sidebar with a slider input for number of bins 
  dashboardSidebar(
    sliderInput("bins",
                "Number of bins:",
                min = 1,
                max = 50,
                value = 30)
  ),
  
  # Show a plot of the generated distribution
  dashboardBody( uiOutput("mybox")
    # box(plotOutput("distPlot"), 
    #     solidHeader = TRUE,
    #     status = "primary",
    #     title = "Box",
    #     background = "red")
  )
  
)

# Define server logic required to draw a histogram
server <- function(input, output) {
  
  observe({output$distPlot <- renderPlot({
    # generate bins based on input$bins from ui.R
    x    <- faithful[, 2] 
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    
    # draw the histogram with the specified number of bins
    hist(x, breaks = bins, col = 'darkgray', border = 'white')
  }, height = input$bins*10)})
  output$mybox <- renderUI({
    box(plotOutput("distPlot"),
        solidHeader = TRUE,
        status = "primary",
        title = "Box",
        height = input$bins*10 + 60,
        background = "red")
  })
}

# Run the application 
shinyApp(ui = ui, server = server)