rshinybslib

Two column layout inside bslib card


I would like to use cards from the bslib package. Inside a card, I would like to have a two-column layout so this means for example two UI shiny elements side by side. Here I tried to create a simple reproducible example:

library(shiny)
library(bslib)

ui <- fluidPage(

        card(card_header("Test card"),
             sliderInput("bins",
                         "Number of bins:",
                         min = 1,
                         max = 50,
                         value = 30), 
             checkboxInput("Test", "Test checkbox", value = FALSE),
           plotOutput("distPlot")
        )
    )

server <- function(input, output) {

    output$distPlot <- renderPlot({
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)

        hist(x, breaks = bins, col = 'darkgray', border = 'white',
             xlab = 'Waiting time to next eruption (in mins)',
             main = 'Histogram of waiting times')
    })
}

shinyApp(ui = ui, server = server)

Output:

enter image description here

As you can see the slider and checkbox are not side by side. I tried using fluidRow with two columns from the shinydashboard package. Unfortunately, this doesn't work. So I was wondering if anyone knows how to have UI elements side by side inside a card from the bslib package?


Solution

  • Not sure about what you tried with shinydashboard columns but this works:

    ui <- fluidPage(
    
      card(card_header("Test card"),
           fluidRow(
             column(width = 2,
                    sliderInput("bins",
                                "Number of bins:",
                                min = 1,
                                max = 50,
                                value = 30)
             ),
             column(width = 2,
                    checkboxInput("Test", "Test checkbox", value = FALSE))
                           ),
    
           plotOutput("distPlot")
      )
    )
    

    twocolsinputs