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

user_7920339 0
Viewed 801

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!

shiny r css
1 Answers

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.

app using 90vh

user_120488620
Related