Reduce space between widgets - shiny

Question

Is there a way to reduce the empty space further between widgets as shown below. Reducing space between Date and DF
if (interactive()) {
library(shiny)
library(shinyWidgets)
library(DT)
ui <- fluidPage(
tags$h3("Material switch examples"),
fluidRow(column(width = 7),
fluidRow(box(width = 2, dateInput("date","Date", value = Sys.time(), min = Sys.time(), max = Sys.time()-30)),
box(width = 2, selectInput("df","DF",choices = unique(iris$Species))),
box(width = 2, actionButton("ab","Action")))),
dataTableOutput("df")
)
server <- function(input, output) {
output$df <- DT::renderDataTable({
datatable(head(iris),caption = "Iris",options = list(dom = 'ft'))
})
}
shinyApp(ui, server)
}

Answer 1

You could do this by setting the CSS of the two col-sm-2 class to remove (or decrease) the padding-left and padding-right attributes. The problem is that you may want to add back in the left padding on the date box and the right padding on the df box. You could do that this way:
library(shiny)
library(shinyWidgets)
library(shinydashboard)
library(DT)
ui <- fluidPage(
tags$h3("Material switch examples"),
tags$style("
.col-sm-2{
padding-right: 0;
padding-left: 0;
}
#date{
padding-left: 25px;
}
#df{
padding-right: 15px;
}
"),
fluidRow(column(width = 7),
fluidRow(box(width = 2, dateInput("date","Date", value = Sys.time(), min = Sys.time(), max = Sys.time()-30)),
box(width = 2, selectInput("df","DF",choices = unique(iris$Species))),
box(width = 2, actionButton("ab","Action")))),
dataTableOutput("df")
)
server <- function(input, output) {
output$df <- DT::renderDataTable({
datatable(head(iris),caption = "Iris",options = list(dom = 'ft'))
})
}
shinyApp(ui, server)