rshinybs4dash

Controlling white space inside box()


I'm working with bs4dash to create a Shiny-app. However, I'm unable to alter the white space in the box() itself. There's always quite some space between the gray line of the headerBorder and the table. I would like to be be able to play with the excess white space, so the table is as close to the headerBorder as possible.

library(shiny)
library(bs4Dash)
library(gt)
library(tidyverse)

ui <- dashboardPage(
  title = "Example",
  header = dashboardHeader(title = "Example"),
  sidebar = dashboardSidebar(
    sidebarMenu(
      menuItem(
        "Page 1",
        tabName = "example_page",
        icon = icon("e")
      )
  )),
  body = dashboardBody(
    tabItems(
      tabItem(
        tabName = "example_page",
        fluidRow(
          sortable(
            width = 7,
            box(title = "Example box",
                headerBorder = T,
                gt_output("gt_example"),
                width = 12,
                height = 200)
          )
        )
      )
    )
  )
)

server <- function(input, output, session) {
  output$gt_example <- render_gt({
    mpg |> head(2) |> gt()
  })
}

shinyApp(ui, server)

result


Solution

  • Set padding-top of the .card-body and the children of your table (#gt_example > div) to 0px:

    enter image description here

    library(shiny)
    library(bs4Dash)
    library(gt)
    library(tidyverse)
    
    ui <- dashboardPage(
      title = "Example",
      header = dashboardHeader(
        title = "Example",
        tags$head(tags$style(HTML(
         ".card-body, #gt_example > div {
            padding-top: 0px !important;
          }")))),
      sidebar = dashboardSidebar(
        sidebarMenu(
          menuItem(
            "Page 1",
            tabName = "example_page",
            icon = icon("e")
          )
        )),
      body = dashboardBody(
        tabItems(
          tabItem(
            tabName = "example_page",
            fluidRow(
              sortable(
                width = 7,
                box(title = "Example box",
                    headerBorder = T,
                    gt_output("gt_example"),
                    width = 12,
                    height = 200)
              )
            )
          )
        )
      )
    )
    
    server <- function(input, output, session) {
      output$gt_example <- render_gt({
        mpg |> head(2) |> gt()
      })
    }
    
    shinyApp(ui, server)