rstudio/bslib

Consistent height of widgets

Opened this issue · 0 comments

Even though I didn't specify any theme, the default theme is pretty good looking already, but I noticed that all the widgets seem to be a bit taller, which takes up some space, that's fine, they still align.
But when I used the extension Buttons in DT, I noticed the problem, it doesn't have the same height as the search box and the pagination control in DT, unify it in the future, or will I have to add a custom theme?
Here is an example to explain the misalignment I see, compared to shiny without bslib.

library(shiny)
library(DT)

shinyApp(
  ui <- fluidPage(
    fluidRow(
      column(6, DTOutput("table_1")),
      column(6, DTOutput("table_2")),
    )
  ),
  server <- function(input, output, session) {
    df <- data.frame(a = 1:3, b = 4:6, c = 7:9)
    output$table_1 <- renderDT({
      datatable(
        df,
        extensions = 'Buttons',
        options = list(
          dom = "Brftip",
          buttons = list(
            "csv", "copy"
          )
        )
      )
    })
    output$table_2 <- renderDT({
      datatable(
        df,
        extensions = 'Buttons',
        options = list(
          dom = "Bprt",
          buttons = list(
            "csv", "copy"
          )
        )
      )
    })
  }
)
library(shiny)
library(DT)
library(bslib)

shinyApp(
  ui <- page_fluid(
    fluidRow(
      column(6, DTOutput("table_1")),
      column(6, DTOutput("table_2")),
    )
  ),
  server <- function(input, output, session) {
    df <- data.frame(a = 1:3, b = 4:6, c = 7:9)
    output$table_1 <- renderDT({
      datatable(
        df,
        extensions = 'Buttons',
        options = list(
          dom = "Brftip",
          buttons = list(
            "csv", "copy"
          )
        )
      )
    })
    output$table_2 <- renderDT({
      datatable(
        df,
        extensions = 'Buttons',
        options = list(
          dom = "Bprt",
          buttons = list(
            "csv", "copy"
          )
        )
      )
    })
  }
)

image