Search code examples
shinyshinydashboardbslib

navbarPage Column layout issue when using bslib::bs_theme(version = 4) or 5


I am having trouble getting boxes to align in fluidRow column format when using bslib and theme bootstrap 4 and 5 with navbarPage. It works with version 3. I can't figure out how to make the version 5 (or 4) to return the right layout. Only one column is used for the later versions. I need the boxes to be arranged in rows.


library(shiny)
library(bslib)
library(shinydashboard)

ui <- navbarPage(
  
  theme = bs_theme(version = 4),   # Wrong Layout
  #theme = bs_theme(version = 3),  # Right Layout
  
  
  title="Dynamic Boxes", 
  #
  
  navbarMenu("Tab1" ,
             
             tabPanel("Item1",
                      fluidPage(
                        fluidRow( column(12,            
                                         uiOutput("boxes")
                        )
                        )
                      )
             )
  )
)

server <- function(input, output) {      
  output$boxes <- renderUI({
    
    lapply(1:10, function(a) {
      x = 1:100
      box(title = paste0("box ", a), renderPlot(plot(x = x, y = x^a)))
    })
    # )
  })
}

shinyApp(ui = ui, server = server)

Solution

  • fluidRow() needs to be outside of the lapply function and column() inside.

    library(shiny)
    library(bslib)
    library(shinydashboard)
    
    ui <- navbarPage(
      theme = bs_theme(version = 4),   # Wrong Layout
      #theme = bs_theme(version = 3),  # Right Layout
    
      title="Dynamic Boxes", 
     
      navbarMenu("Tab1" ,
                 tabPanel("Item1",
                          uiOutput("boxes")
                 )
      )
    )
    server <- function(input, output) {      
      output$boxes <- renderUI({
        fluidRow(
          lapply(1:10, function(a) {
            x = 1:100
            column(6,
                   box(title = paste0("box ", a), 
                       renderPlot(plot(x = x, y = x^a)))
            )
          })
        )
      })
    }
    shinyApp(ui = ui, server = server)