如何在Shiny中增高navlistPanel的well组件高度？

由于navlistPanel()没有直接设置高度的参数，我们可以通过自定义CSS样式来调整包裹导航列表的well容器高度，填充目标空白区域。

修改后的完整代码 #

library(shiny)

ui <- fluidPage(
  titlePanel("Navlist panel example"),
  # 自定义CSS调整well高度
  tags$style(HTML("
    .navlist-well {
      height: 80vh; /* 使用视口高度单位，也可以设具体像素值如600px */
      min-height: 100%;
      margin-bottom: 0; /* 可选：移除底部边距避免多余空白 */
    }
  ")),
  
  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)

说明 #

• 我们通过tags$style()注入CSS，选中navlist-well类（这是Shiny给navlistPanel的well容器自动添加的类名）。
• 使用height: 80vh表示占视口高度的80%，你可以根据实际需求替换成具体像素值（如600px），或者用100%让它填满父容器高度。
• 若需要移除well底部的默认边距，可添加margin-bottom: 0。

内容的提问来源于stack exchange，提问作者Camilo Almario