How can I fix the position of the sidebarPanel (update: and the titlePanel) when the mainPanel is scrollable.

E.g.:

library(shiny)
library(kableExtra)

ui = shiny::fluidPage(
    shiny::sidebarLayout(
        shiny::sidebarPanel(
            shiny::sliderInput("n", "n", min = 20, max = 100, value = 20, step = 5),
        ),
        shiny::mainPanel(
            shiny::tableOutput("show")
        )
    )
)
server = function(input, output, session) {
    output$show = function() {
        df = data.frame(i  = 1:input$n)
        kableExtra::kbl(df)
    }
}
shiny::shinyApp(ui = ui, server = server)

So I would like to keep the sidebarPanel and titlePanel fixed when scrolling down the mainPanel. The mainPanel should still be 100% height (so not an absolute height, such as 600px).

------- UPDATE -----

library(shiny)
library(kableExtra)

ui = shiny::fluidPage(
    tags$style(HTML("div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}")),
    shiny::titlePanel("Title"),
    
    shiny::sidebarLayout(
        tagAppendAttributes(shiny::sidebarPanel(
            shiny::sliderInput("n", "n", min = 20, max = 100, value = 20, step = 5),
        ), class = "sticky"),
        shiny::mainPanel(
            shiny::tableOutput("show")
        )
    )
)
server = function(input, output, session) {
    output$show = function() {
        df = data.frame(i  = 1:input$n)
        kableExtra::kbl(df)
    }
}
shiny::shinyApp(ui = ui, server = server)

The two problems remain:

1. Title appears when scrolling down
2. When the window width is made smaller ('phone' mode), the main panel is shown under the sidebarPanel, and not strictly at the bottom.

CodePudding user response：

We could use style = "position:fixed;width:inherit;" in the sidebarPanel:

library("shiny")

ui <- fluidPage(
  
  titlePanel(
    "Fixed"
  ),
  
  sidebarLayout(
    
    sidebarPanel(
      style = "position:fixed;width:inherit;",
      "Inputs",
      width = 4,
      sliderInput("n", "n", min = 20, max = 100, value = 20, step = 5)),
    
    
    mainPanel(
      tableOutput("show"),
      width = 8)
    
  ))

server <- function(input, output, session) {
  
  output$show = function() {
    df = data.frame(i  = 1:input$n)
    kableExtra::kbl(df)
  }
  
}

shinyApp(ui = ui, server = server)

CodePudding user response：

We can use