rshinybslib

How to reduce the space between elements of a bslib grid?


How can I reduce/eliminate the white space between the 5 actionboxes but keep the spaces between the 2 actionboxes? Preferably also shown how the solution was "found" in Chrome?

library(shiny)
library(bslib)
library(tidyverse)


style <- "font-size:80%; padding-top: 0; padding-bottom: 0; text-align:left"

ui <- fluidPage(
  
  card(
    card_header(
      "Plot",
    ),
    plotOutput("plot"),
    card_footer(
      card_body(
        layout_column_wrap(
          actionButton("labels", "Labels", icon = icon("tag"), style = style),
          actionButton("axes", "Axes", icon = icon("lines-leaning"), style = style),
          actionButton("theme", "Theme", icon = icon("palette"), style = style),
          actionButton("options", "Options", icon = icon("sliders"), style = style),
          actionButton("sort", "Select & Sort", icon = icon("sort"), style = style)
        ))),
    card_body(
    layout_column_wrap(actionButton("a", "test"), actionButton("b", "test2"))
    )
  )
)

server <- function(input, output, session) {
  
  output$plot <- renderPlot({
    
    ggplot(iris, aes(x = Sepal.Length, y = Sepal.Width, color = Species)) +
      geom_point()
    
  })
  
}

shinyApp(ui, server)

Solution

  • The space between elements in a bslib grid, e.g. created by using layout_column_wrap, can be controlled by adjusting the scss variable --bslib_spacer which defaults to 1rem. Hence, one can set up a theme using another value, e.g. like this:

    page_fluid(
      theme = bs_theme("bslib_spacer" = "0rem"),
      ...
    )
    

    However, this works globally and in your setup you need to distinguish this between different grids. This could be done by passing a gap parameter to layout_column_wrap. From ?layout_column_wrap:

    gap: A CSS length unit defining the gap (i.e., spacing) between elements provided to .... This argument is only applicable when fillable = TRUE

    library(shiny)
    library(bslib)
    
    style <- "font-size:80%; padding-top: 0; padding-bottom: 0; text-align:left"
    
    ui <- page_fluid(
      card(
        card_footer(
          card_body(
            layout_column_wrap(
              actionButton("labels", "Labels", icon = icon("tag"), style = style),
              actionButton("axes", "Axes", icon = icon("lines-leaning"), style = style),
              actionButton("theme", "Theme", icon = icon("palette"), style = style),
              actionButton("options", "Options", icon = icon("sliders"), style = style),
              actionButton("sort", "Select & Sort", icon = icon("sort"), style = style),
              gap = "0rem"
            ))),
        card_body(
          layout_column_wrap(actionButton("a", "test"), actionButton("b", "test2"))
        )
      )
    )
    
    shinyApp(ui, \(...){})
    

    enter image description here