Adjusting width of tabPanel titles with R Shiny

Question

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.

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!

Answer 1

I'm not great at CSS but this should give you (or another contributor) a start. The issue I'm facing is a phantom tab appears in the front of the header and it doesn't resize correctly if you make your screen very narrow (does to a certain point and then fails).

Hope this helps!

library(shiny)
ui <- fluidPage(
  tabsetPanel(
    tags$head(tags$style(HTML('
                            /* HEADER */
                            .nav>li>a {
                            padding: 1vh 8vw;;
                            }'
))),



    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)