CODEWITHSUNDEEP
rshiny
Camilo Almario
Camilo Almario

Reputation: 49

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)

Upvotes: 1

Views: 190

Answers (1)

Johan Rosa
Johan Rosa

Reputation: 3152

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)

enter image description here

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

Upvotes: 1

Related Questions