Shiny/CSS: How to adjust width of tabsetPanel titles

While layouting my R Shiny Web-Application, I encountered a problem for which I could not find a solution in the forums.

My aim is to have a tabPanel within my page, where the titles take up the whole width of the side itself.

Here´s a reprex code:

library(shiny)
ui <- fluidPage(
   tabsetPanel(
    tabPanel("Title1", tags$h1("text")),
    tabPanel("Title2", tags$h1("text")),
    tabPanel("Title3", tags$h1("text")),
    tabPanel("Title4", tags$h1("text"))
   )
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

If you run this Shiny App, the titles take up only about 10% of the width (especially in full screen). However, I would like them to span the whole width, with each title taking up the same space.

I am pretty sure this is solvable with CSS.

Any help is greatly appreciated!

you could find the below as a reference and further configure the width as required.

library(shiny)
ui <- fluidPage(
  tags$style(HTML("
    .tabbable > .nav > li > a {background-color: aqua;  color:black; width: 300PX;}
  ")),
  tabsetPanel(
    tabPanel("Title1", tags$h1("text")),
    tabPanel("Title2", tags$h1("text")),
    tabPanel("Title3", tags$h1("text")),
    tabPanel("Title4", tags$h1("text"))
  )
)

server <- function(input, output) {
  
}

shinyApp(ui = ui, server = server)

Thank you for your answer, helped alot!
In my final solution I now use the relative width unit vw instead of px though, so it automatically adjusts relative to the viewpoint width.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.