How to create a fixed banner at the top of the page and have a scrollbar below it?

Issue

I'd like the scrolling cursor to start only after the tabPanel. This way, when scrolling down, the tabPanels are always visible. This would create a kind of banner at the top of the page. Here's a reproducible example :

library("shiny")

txt <- paste(sapply(seq_len(100), function(x){
  p <- shiny::tags$p(stringi::stri_rand_lipsum(1))
  return(as.character(p))
}), collapse = "")


ui = navbarPage(title = "Navbar example", 
                position = c("fixed-top"),
                
                id = "navbar",
                tags$br(),
                tags$br(),
                tags$br(),
                tags$br(),
                tabPanel(title = "tab 1", 
                         tabsetPanel(id = "id1",
                                     tabPanel(title = "A",
                                              HTML(txt),
                                     ),
                                     tabPanel(title = "B",
                                              HTML(txt),
                                     )
                         )),
                tabPanel(title = "tab 2", 
                         tabsetPanel(id = "id2",
                                     tabPanel(title = "C",
                                              HTML(txt),
                                     ),
                                     tabPanel(title = "D",
                                     ),
                                     tabPanel(title = "E",
                                              HTML(txt),
                                     )
                         ))
)

server = shinyServer(function(input, output) {
})


shinyApp(ui, server)

Below is a picture for better understanding.

Solution

You could use

.tabbable .tab-content {
    height: calc(100vh - 122px);
    overflow-y: auto;
}

This would result in:

library(shiny)

txt <- paste(sapply(seq_len(100), function(x){
    p <- shiny::tags$p(stringi::stri_rand_lipsum(1))
    return(as.character(p))
}), collapse = "")


ui = navbarPage(tags$head(tags$style(HTML("
                              .tabbable .tab-content {
                                height: calc(100vh - 122px);
                                overflow-y: auto;
                              }
                              "))),
    title = "Navbar example", 
                position = c("fixed-top"),
                
                id = "navbar",
                tags$br(),
                tags$br(),
                tags$br(),
                tags$br(),
                tabPanel(title = "tab 1", 
                         tabsetPanel(id = "id1",
                                     tabPanel(title = "A",
                                              HTML(txt),
                                     ),
                                     tabPanel(title = "B",
                                              HTML(txt),
                                     )
                         )),
                tabPanel(title = "tab 2", 
                         tabsetPanel(id = "id2",
                                     tabPanel(title = "C",
                                              HTML(txt),
                                     ),
                                     tabPanel(title = "D",
                                     ),
                                     tabPanel(title = "E",
                                              HTML(txt),
                                     )
                         ))
)

server = shinyServer(function(input, output) {
})


shinyApp(ui, server)

Answered By - Jan