CODEWITHSUNDEEP
shinyshinydashboardbslib
ashcrashbegash
ashcrashbegash

Reputation: 271

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)

Upvotes: 0

Views: 270

Answers (1)

ashcrashbegash
ashcrashbegash

Reputation: 271

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)

Upvotes: 0

Related Questions