'How can I format navlistPanel in a bs4Dash box so that the tabItems are underneath each other?
I am trying to add a navlistPanel to a box() in bs4Dash and when I set the column width to 12, the tabItems squeeze next to each other like this:
Adding the widths = c(4,8) argument to navlistPanel also gives me the same result. If I set the column width to 4 or less, the navlistPanel is properly formatted.
My goal is to have a box() with column = 12 and a vertical tab menu inside it with width = 4 and have the tabs look correct.
I've also tried using tabsetPanel with vertical = TRUE, but the content doesn't show up in the right location, it shows up below. See picture #2:
Reprexes for both are below:
library(shiny)
library(bs4Dash)
ui <- dashboardPage(
header = dashboardHeader(
title = dashboardBrand(
title = "My dashboard",
color = "primary",
href = "https://adminlte.io/themes/v3",
image = "https://adminlte.io/themes/v3/dist/img/AdminLTELogo.png"
)),
sidebar = bs4DashSidebar(),
controlbar = dashboardControlbar(),
body = dashboardBody(fluidRow(column(
12,
box(
title = "Title",
status = "primary",
solidHeader = TRUE,
collapsible = FALSE,
maximizable = TRUE,
color = "white",
height = 175,
width = NULL,
navlistPanel(
"Header",
tabPanel("First"),
tabPanel("Second"),
tabPanel("Third")
)
)
))),
help = FALSE,
dark = NULL,
scrollToTop = FALSE
)
server = function(input, output, session) {
}
shinyApp(ui, server)
library(shiny)
library(bs4Dash)
ui <- dashboardPage(
header = dashboardHeader(
title = dashboardBrand(
title = "My dashboard",
color = "primary",
href = "https://adminlte.io/themes/v3",
image = "https://adminlte.io/themes/v3/dist/img/AdminLTELogo.png"
)),
sidebar = bs4DashSidebar(),
controlbar = dashboardControlbar(),
body = dashboardBody(fluidRow(column(
12,
box(
title = "Title",
status = "primary",
solidHeader = TRUE,
collapsible = FALSE,
maximizable = TRUE,
color = "white",
height = 175,
width = NULL,
tabsetPanel(
id = NULL,
vertical = TRUE,
tabPanel("First",
"The content is below and I want it to the right of the tabset"),
tabPanel("Second"),
tabPanel("Third")
)
)
))),
help = FALSE,
dark = NULL,
scrollToTop = FALSE
)
server = function(input, output, session) {
}
shinyApp(ui, server)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|


