getting css position:sticky to work with shinydashboard

Question

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)

Answer 1

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 a height property and the overflowing element must have the property overflow: visible or must have a height. Here the overflowing element is a div.wrapper. This works:

library(shiny)
library(shinydashboard)

#-----------------------------------#
# Define UI for application----
#-----------------------------------#

ui <- dashboardPage(
  
  dashboardHeader(disable = TRUE),
  dashboardSidebar(disable = TRUE),
  dashboardBody(
    tags$head(
      tags$style(HTML(
        "#hhh {position: sticky; top: 0;}
        .wrapper {overflow: visible;}"
      ))
    ),
    
    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, 
               box(status = 'info',solidHeader = TRUE, width = 12, height = "600px",
                   tags$main(
                     style = "height: 400px;",
                     tags$header(id="hhh", "BOX 3"),
                     tags$div("contents"),
                     tags$footer("footer")
                   )
               )
      )
    ),#fluidRow
  )#dashboardBody
)#dashboardPage

# Define server logic
server <- function(input, output, session) {
  
  
}
# Run the application----
shinyApp(ui = ui, server = server)