Make a navigation list panel taller in shiny

Here is a simple example of a navigation list panel:

library(shiny)

ui <-  fluidPage(
titlePanel("Navlist panel example"),

    navlistPanel(
      "Header",
      tabPanel("First",
               h3("This is the first panel")),
      tabPanel("Second",
               h3("This is the second panel")),
      tabPanel("Third",
               h3("This is the third panel"))
    )

)

server <- function(input, output) {
}

shinyApp(ui, server)

I need the well (AKA the grey rectangle with rounded corners that is around the navigation list) to be taller and expand to take the white space marked by the red rectangle:

Image

There is no argument in the navlistPanel() function to do this (there is only the width argument)

>Solution :

I would go with something as follow, adding a style tag and adding custom height to the .row element.

library(shiny)

ui <-  fluidPage(
  titlePanel("Navlist panel example"),
  tags$style(".row{height: 500px;} .row div:nth-child(1){height: 100%;}"),
  
  navlistPanel(
    "Header",
    tabPanel("First",
             h3("This is the first panel")),
    tabPanel("Second",
             h3("This is the second panel")),
    tabPanel("Third",
             h3("This is the third panel"))
  )
  
)

server <- function(input, output) {
}

shinyApp(ui, server)

PS: be aware that you can have multiple rows in your app