CODEWITHSUNDEEP
cssrshiny
sirallen
sirallen

Reputation: 1966

Make sidebarPanel autoscroll with mainPanel in shiny

I made a sidebarLayout in shiny which allows for scrolling in the mainPanel in case of overflow. The sidebarPanel's position remains fixed, such that it disappears as you scroll down the mainPanel. However, I'd like it to scroll with the mainPanel, so that the user doesn't need to scroll up again to change settings. How do I do this?

Basic setup:

ui = fluidPage(

  tags$style(type='text/css', 'body { overflow-y: scroll; }'),

  titlePanel(
    # ...
  ),

  sidebarLayout(

    sidebarPanel(
      # ...
      width = 3),

    mainPanel(
      # ...

      width = 9 )

  ))

server = function(input,output,session) {

  # ...

}

shinyApp(ui=ui, server=server)

Upvotes: 6

Views: 7236

Answers (1)

Victorp
Victorp

Reputation: 13856

You can add style = "position:fixed;width:inherit;" to your sidebarPanel, but you will loose padding for your element, and the width will be exactly 1/4 (25%) of your page, put 22% for example if you want more space between sidebar panel and main panel.

example :

library("shiny")

ui <- fluidPage(

  titlePanel(
    "Fixed sidebar panel"
  ),

  sidebarLayout(

    sidebarPanel(
      style = "position:fixed;width:inherit;",
      "Inputs",
      width = 3),


    mainPanel(

      lapply(
        X = 1:20,
        FUN = function(i) {
          plotOutput(outputId = paste("plot", i, sep = "-"))
        }
      ),

      width = 9 )

  ))

server <- function(input, output, session) {

  lapply(
    X = 1:20,
    FUN = function(i) {
      output[[paste("plot", i, sep = "-")]] <- renderPlot({plot(rnorm(10))})
    }
  )

}

shinyApp(ui = ui, server = server)

Upvotes: 16

Related Questions