I can't seem to get position:sticky
to work with shinydashboard.
Example below. I was hoping box 3 would scroll until hitting the top of the box and then remain fixed. Appreciate any ideas anyone might have.
#-----------------------------------#
#clear workspace and load libraries----
#-----------------------------------#
rm(list = ls())
library(shiny)
library(shinydashboard)
#-----------------------------------#
# Define UI for application----
#-----------------------------------#
ui <- dashboardPage(
dashboardHeader(disable = TRUE),
dashboardSidebar(disable = TRUE),
dashboardBody(
fluidRow(
box(status = 'info',solidHeader = TRUE, width = 12, height = "300px",
p("box 1")
),
column(width = 6,
box(status = 'info',solidHeader = TRUE, width = 12, height = "1600px",
p("box 2")
)
),#column
column(width = 6, style = "position:sticky;top:0;",
box(status = 'info',solidHeader = TRUE, width = 12, height = "600px",
p("box 3")
)
)
),#fluidRow
)#dashboardBody
)#dashboardPage
# Define server logic
server <- function(input, output, session) {
}
# Run the application----
shinyApp(ui = ui, server = server)
sticky
is tricky. According to this link, a sticky element must not be alone in his parent element. And according to this link, the parent must have aheight
property and the overflowing element must have the propertyoverflow: visible
or must have aheight
. Here the overflowing element is adiv.wrapper
. This works: