How to add autoscroll for sidebar to run along with mainPanel or Body in Shinydashboard

Similar Q but in Shiny

However, I tried for Shinydashboard but could add autoscroll.
Now, can we make the sidebar selectInput to scroll along with Mainpanel to ensure, User sees and probably change the selectInput even after they scrolled down the mainPanel ?

library(shiny)
library(shinydashboard)

ui <- dashboardPage(dashboardHeader(title = "Title of App"), 
                    sidebar = dashboardSidebar(
                      sidebarMenu(id = "tabs",
                                  menuItem(
                                           selectInput("n","N",choices = c(50,100,150,200)))
                     )
                    ),
                    body = dashboardBody(
                      plotOutput('plot'),
                      plotOutput('plot1'),
                      plotOutput('plot2')
                                 )
)

server <- function(input, output, session) {
  
  output$plot <- renderPlot({
    hist(runif(input$n), main = "Clearly known the selected N value")
  })
  
  output$plot1 <- renderPlot({
    hist(runif(input$n), main = "hardly known the selected N value")
  })
  
  output$plot2 <- renderPlot({
    hist(runif(input$n), main = "Never know the selected N value")
  })
  
}

shinyApp(ui = ui, server = server)

Hi,

Here is my first attempt:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Title of App"),
  
  dashboardSidebar(width = 220,
    sidebarMenu(id = "tabs",style = "position:fixed;width:220px;",
     menuItem(style = "position:fixed;width: inherit;",
        selectInput("n", "N", choices = c(50, 100, 150, 200))
    ))),
  
  dashboardBody(
    plotOutput('plot'),
    plotOutput('plot1'),
    plotOutput('plot2')
  )
)

server <- function(input, output, session) {
  output$plot <- renderPlot({
    hist(runif(input$n), main = "Clearly known the selected N value")
  })
  
  output$plot1 <- renderPlot({
    hist(runif(input$n), main = "hardly known the selected N value")
  })
  
  output$plot2 <- renderPlot({
    hist(runif(input$n), main = "Never know the selected N value")
  })
  
}

shinyApp(ui = ui, server = server)

It works, though I'm not very happy with the way I got there :stuck_out_tongue:

  • You need to set the style of the sideBarMenu to position:fixed;width:220px;
  • Then you set the style of each menuItem to position:fixed;width:inherit;
  • I feel that sideBarMenu should be able to inherit its width as well from dashboardSidebar, but that doesn't work so you have to specify the width in both the dashboardSidebar and sideBarMenu. If you don't the width will be all messed up...

I'm sure there's a more elegant solution, but at least this works for now :slight_smile:

PJ

2 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.