Fixing top section in shiny

user_16935119 0
Viewed 69

Is there a way to fix the top section of the dashboard here. Right now, the widgets (selectinput) are fixed, but when the user scroll down, it gets covered by the datatable. Can we not make sure this does not get covered and only datatable moves down?

library(shiny)
library(DT)
ui <- shinyUI(fluidPage(
  titlePanel(fluidRow(
    div(column(12, align="center",
           selectInput("rmd1", "RMDw", choices = c(1,2)),
           selectInput("rmd2", "RMD2", choices = c(1,2))
    ), style = "position:fixed; width:inherit;")
  )),
  br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),
  dataTableOutput("uioutput", height = "2000px")
  
))

server <- function(input, output, session) {
  output$uioutput <- renderDataTable({
    datatable(iris)
  })
}

shinyApp(ui, server)
shiny r
2 Answers

You can use the CSS z-index property to control the stack order the HTML elements:

library(shiny)
library(DT)
ui <- shinyUI(fluidPage(
  titlePanel(fluidRow(
    div(column(12, align="center",
               selectInput("rmd1", "RMDw", choices = c(1,2)),
               selectInput("rmd2", "RMD2", choices = c(1,2))
    ), style = "position:fixed; width:inherit; z-index: 1; background-color: white;")
  )),
  br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),
  dataTableOutput("uioutput", height = "2000px")
  
))

server <- function(input, output, session) {
  output$uioutput <- renderDataTable({
    datatable(iris)
  })
}

shinyApp(ui, server)

Another approach is using position: sticky;.

user_98413890

Changing the style line to position:absolute makes it so that the selection boxes scroll up and out of the page when you scroll down, if that's what you were looking for.

library(shiny)
library(DT)
ui <- shinyUI(fluidPage(
  titlePanel(fluidRow(
    div(column(12, align="center",
           selectInput("rmd1", "RMDw", choices = c(1,2)),
           selectInput("rmd2", "RMD2", choices = c(1,2))
    ), style = "position:absolute; width:inherit;")
  )),
  br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),
  dataTableOutput("uioutput", height = "2000px")
  
))

server <- function(input, output, session) {
  output$uioutput <- renderDataTable({
    datatable(iris)
  })
}

shinyApp(ui, server)

If you're trying to make the table stay in place and scroll down through the table, use DTOutput() and renderDataTable() instead of dataTableOutput() and renderDataTable(). Then, get rid of datatable() inside renderDT() and just use 'iris'. Finally, you can add the Scroller extension and an options list with scrollY and scroller. Others may be able to explain the difference between DT and DataTable (this page might help as well: https://rstudio.github.io/DT/shiny.html), but I believe DTOutput and renderDT are more flexible. Note: you can add horizontal scrollbars as well with scrollX if you use a table with more fields in the future.

Updated code is below.

Hope either of these helps!

library(shiny)
library(DT)
ui <- shinyUI(fluidPage(
  titlePanel(fluidRow(
    div(column(12, align="center",
           selectInput("rmd1", "RMDw", choices = c(1,2)),
           selectInput("rmd2", "RMD2", choices = c(1,2))
    ), style = "position:absolute; width:inherit;")
  )),
  br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),
  DTOutput("uioutput", height = "600px")
  
))

server <- function(input, output, session) {
  output$uioutput <- renderDT({
    iris
  },
    extensions = c('Scroller'),
    fillContainer = T,
    options = list(deferRender = T,
                   scrollY = 400,
                   scroller = T)
  )
}

shinyApp(ui, server)
user_111869590
Related