Fixing tabsetpanel

[vinayprakash808]

Hi all,

For the below application, is there a way to fix the tabpanel. For example if there are some contents, the page goes till down and when the user scroll down, still the top tabpanel should be visible. is it possible

library(shiny)
ui <- fluidPage(
  tabsetPanel(
    id="inTabset",
    tabPanel("Tab 1",actionButton("switch_tab", "Go to the third tab")
    ),
    tabPanel("Tab 2", "there!"),
    tabPanel("Tab 3", "there!"))
  
)

server <- function(input, output, session) {
  
  observeEvent(input$switch_tab, {
    updateTabsetPanel(session, "inTabset",selected = "Tab 3")
  })
  
}
shinyApp(ui = ui, server = server)

[dcruvolo]

With a little bit of CSS, it is possible to make the tabPanel fixed to the top of the page. One way is to target the underlying html element #inTabset. I generated some sample text to demonstrate what happens when the window is scrolled. I added some space at the top of the tab content so the text would not be covered by the fixed tab panel. Adjust the top margin in .tab-content as necessary.

Depending on the structure of your app, navbarPage layout might be a better options as this is the default behavior (if I remember correctly).

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

# app
ui <- fluidPage(
  tags$head(
    tags$style(
      "#inTabset {
        position: fixed;
        width: 100%;
        background-color: white;
        top: 0;
        }",
      ".tab-content  {
        margin-top: 72px;
      }"
    )
  ),
  tabsetPanel(
    id="inTabset",
    tabPanel("Tab 1",
      HTML(txt),
      actionButton("switch_tab", "Go to the third tab")
    ),
    tabPanel("Tab 2", "there!"),
    tabPanel("Tab 3", "there!"))
  
)

server <- function(input, output, session) {
  
  observeEvent(input$switch_tab, {
    updateTabsetPanel(session, "inTabset",selected = "Tab 3")
  })
  
}
shinyApp(ui = ui, server = server)

[vinayprakash808]

Hi

perfect got it. But I am trying to replicate this the below app where there are lot FluidRows and boxes. but I am not able to replicate it. Can you guide me

dashboardPage(title = "Title1",
              header <- dashboardHeader(disable = TRUE),
              dashboardSidebar(disable = TRUE),
              body <- dashboardBody(tags$head(
                tags$style(
                  "#tabs {
        position: fixed;
        width: 100%;
        background-color: white;
        top: 0;
        }",
                  ".tab-content  {
        margin-top: 72px;
      }"
                )
              ),
              tags$head(tags$style(
                HTML(
                  '.content-wrapper {background-color: #fff;}',
                  'div.box {border-left-color:#fff;border-top-color:#fff;border-bottom-color:#fff;border-right-color:#fff;}'
                )
              )),
              
              fluidRow(
                tabBox(id = "tabs",
                       width = 12,
                       tabPanel("AWE",selected = TRUE, icon = icon("bolt", class = NULL, lib = "font-awesome"),
                                fluidRow(div(id = 'set',
                                             title = "Main",width = NULL,solidHeader = TRUE,collapsible = TRUE, collapsed = FALSE,
                                             fluidRow(
                                               column(width = 2,offset = 0,bsButton(inputId = "bt1", label = "Import ", icon = icon("upload", class = NULL, lib = "font-awesome"), size = "small", style = 'primary', block = TRUE, disabled = FALSE)),
                                               column(width = 2,offset = 0,bsButton(inputId = "bt2", label = "Save ", icon = icon("download", class = NULL, lib = "font-awesome"), size = "small", style = 'primary', block = TRUE, disabled = FALSE)),
                                               column(width = 2,offset = 0,bsButton(inputId = "bt3", label = " Model", icon = icon("refresh", class = NULL, lib = "font-awesome"), size = "small", style = 'primary', block = TRUE, disabled = FALSE))
                                               
                                             )
                                )))))))