Shiny: checkboxes in DT make row more changing height - css

Question

I am implementing some checkboxes in R shiny DT, however for some reasons it seems like the checkbox is contained in a box higher than the cell itself, so I am ending up with a very unpleasant layout as far less rows fit the same page.
Is there a way to control the height in which the checkbox or other components as props are contained, in order to fix the cell? the checkbox itself is much smaller than the actual cells and would fit perfectly in a normal cell.
below some code to reproduce the problem if you want to play with it.
library(DT)
ui <- basicPage(
h2("The mtcars data"),
DT::dataTableOutput("mytable")
)
server <- function(input, output) {
shinyInput <- function(FUN, len, id, ...) {
inputs <- character(len)
for (i in seq_len(len)) {
inputs[i] <- as.character(FUN(paste0(id, i), ...))
}
inputs
}
mtcars <- data.frame(mtcars, newvar=shinyInput(checkboxInput,nrow(mtcars),"chkbx_",label="",value=TRUE,width=NULL))
output$mytable = DT::renderDataTable({
DT::datatable(mtcars, escape = FALSE, selection = 'none', options = list(searching = FALSE, ordering = FALSE))
})
}
shinyApp(ui, server)

Answer 1

You need to modify CSS of the app in order to achieve this. The quickest solution is to add a style tag to your UI:
ui <- basicPage(
tags$style(HTML("
td > div.form-group > div.checkbox {
margin: 0px;
}
td > div.form-group {
margin: 0px;
}
")),
h2("The mtcars data"),
DT::dataTableOutput("mytable")
)
This will remove margins from all form-groups and checkboxes inside table cells in the app.