bslib icon indicating copy to clipboard operation
bslib copied to clipboard

Cannot set `table-cell-padding` on "Lux" theme.

Open TheFightMilk opened this issue 2 years ago • 1 comments

# Header
## Load packages
library(shiny)
library(tidyverse)
library(DT)
library(bslib)

ui <- navbarPage("Test",
                 inverse = T,
                 collapsible = T,
                 theme = bs_theme(
                   version = 4,
                   bootswatch = "lux",
                   "font-size-base" = "1rem",
                   "table-cell-padding" = ".4rem"
                 ),
                 tabPanel(
                   title = "Data Tables", 
                   id = "data",
                   icon = icon("flask"),
                   fluidRow(
                     dataTableOutput("DT1")
                   )
                   
                 )
                 
)

server <- function(input, output, session) {
  output$DT1 <- renderDataTable({
    datatable(mtcars, 
              style = "bootstrap4",
              options = list(info = F,
                             searching = T,
                             paging = T,
                             autoWidth = T,
                             scrollX = T),
              filter = list(position = 'top', clear = FALSE),
              class = 'cell-border stripe compact',
              rownames = F)
  })
  
}

##
shinyApp(ui, server)

image

The table cell padding doesn't change when adding BS4 variable "table-cell-padding" when using the "lux" theme. It works when I use some other theme e.g. "flatly". I want the cells to be more compact and tight around the numbers/column names.

TheFightMilk avatar Aug 12 '21 16:08 TheFightMilk

Most bootswatch themes aren't very well integrated with Bootstrap Sass variables (in most cases they add hard coded CSS styles to achieve their custom styling), so it's not particularly surprising to me that this doesn't work how you'd expect it to (if you want to add cell padding, you'll probably have to bs_add_rules() to add additional CSS rules).

cpsievert avatar Oct 06 '21 14:10 cpsievert