How to control padding for value boxes created with bslib-CodePudding

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?

CodePudding user response：

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)