How to control padding for value boxes created with bslib

Question

I thought I could set a class for the value box to remove padding like this:

bslib::value_box("test", "test", class = "p-0")

Or in a minimal Shiny app:

library(shiny)

ui <- fluidPage(
  theme = bslib::bs_theme(version = 5),
  bslib::value_box("test", "test", class = "p-0")    
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

But if I do that, it removes only the padding for the bootstrap card:

I want to remove all the blue padding around the content, including the bootstrap card body.

The problem appears to be that bslib::value_box() function wraps content with bslib::card_body_fill(), and it doesn't look like there is a way to pass arguments through to card_body_fill().

I can go into developer tools and search for "padding" and accomplish this:

Or I can add some CSS:

.card-body {
  padding: 0;
}

But this will change the padding for all elements with class card_body. What if I want to target only a few value boxes?

You can write a css file that control this? Can You provide a complete minimal example here?! — shafee, Feb 03 '23 at 04:45
I updated my question with some more details. What part of `bslib::value_box("test", "test", class = "p-0")` is not minimal or reproducible? My question is how to control padding for specific value boxes created with the `bslib` R package. — Giovanni Colitti, Feb 03 '23 at 13:02
And that's what I am asking. A minimal example of shiny app with just this box. — shafee, Feb 03 '23 at 13:24
I added a minimal Shiny app to the question. But Shiny is not needed for the static HTML produced by `bslib::value_box()`. You can just run the `bslib::value_box()` function from the R console. — Giovanni Colitti, Feb 03 '23 at 13:30

shafee · Accepted Answer · 2023-02-03T14:07:57.627

Add a class (suppose nopad) to value_boxes for which you want to remove the padding of the content. Using developer tools, you would see that value_box contents are wrapped within a div with class .value-box-area. So Change the padding for css selector div.nopad .value-box-area.

library(shiny)

ui <- fluidPage(
  theme = bslib::bs_theme(version = 5),
  
  # css styles -------------------------------------------
  tags$head(
    # Note the wrapping of the string in HTML()
    tags$style(HTML("
      div.nopad .value-box-area {
        padding: 0;
      }
    "))
  ),
  # ------------------------------------------------------
  
  bslib::value_box("test", "test", class = "p-0 nopad"), # with class nopad
  
  bslib::value_box("test", "test", class = "p-0")
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

How to control padding for value boxes created with bslib

1 Answers1