Setting sidebarPanel height equal to the height of mainPanel content in shiny

Question

I am working on an app with a scrollable sidebarPanel where the the height of the mainPanel can vary, for example:

library(shiny)

ui <- fluidPage(
  headerPanel('Iris k-means clustering'),
  sidebarPanel(style = "overflow-y:scroll; max-height: 600px; position:relative;",
               numericInput('clusters', 'Cluster count', 3, min = 1, max = 9),
               selectInput('xcol', 'X Variable', names(iris)),
               selectInput('xcol', 'X Variable', names(iris)),
               selectInput('xcol', 'X Variable', names(iris)),
               selectInput('xcol', 'X Variable', names(iris)),
               selectInput('xcol', 'X Variable', names(iris)),
               selectInput('xcol', 'X Variable', names(iris)),
               selectInput('xcol', 'X Variable', names(iris)),
               selectInput('xcol', 'X Variable', names(iris)),
               selectInput('xcol', 'X Variable', names(iris)),
               selectInput('xcol', 'X Variable', names(iris)),
               selectInput('ycol', 'Y Variable', names(iris),
                           selected = names(iris)[[2]])
              
  ),
  mainPanel(
    plotOutput('plot1'),
    conditionalPanel("input.clusters == 2", 
                     plotOutput('plot2') 
    )
  )
)

server <- function(input, output) {
  output$plot1 <- renderPlot({
    plot(x=iris$Sepal.Length, iris$Sepal.Width,
         col = iris$Species, pch = 20, cex = 3)
  })
  
  output$plot2 <- renderPlot({
    plot(x=iris$Petal.Length, iris$Petal.Width,
         col = iris$Species, pch = 20, cex = 3)
  })
  
}

shinyApp(ui = ui, server = server)

the height of mainPanel changes if cluster == 2. Is there a way to allow the height of the side-bar to automatically match the height of the mainPanel output? So that the sidebarPanel always goes to the bottom of the page, but still scrolls.

I assume it is something to do with the max-height css param but not sure where to go from there.

Thanks!

score 2 · Answer 1 · answered Mar 06 '21 at 17:44

As you said, it is related to the max-height param. You can use relative units to define that parameter. My answer is based these two:

You can set max-height: 100% to use a height of 100% units relative to the parent div element, or you can set max-height: 100vh to use 100% units relative to viewport height (browser window). Of course, you can use numbers different from 100 to define the parameter.

I found that 90vh looked nice in your app.

Thanks, I really wanted the sidebar to match the height of the main panel though (so it always runs to the bottom of the page). In this case it looks like the sidebar height is fixed - or am I missing something? — KGee, Apr 08 '21 at 12:42

Setting sidebarPanel height equal to the height of mainPanel content in shiny

1 Answers1