'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:

navlistPanel issue in box()

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:

Vertical tabsetPanel issue in box()

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