Vertical alignment of numericInput in DT

Question

I've been trying to vertically align the elements inside a dataframe rendered by dt, to do this I used the className = "dt-center" arguments inside the options of the datatable function, while this works for most of the elements of my dataframe, it does not center the numericInput inside it.

I tried to use the "vertical-align" = "middle" css argument with the formatStyle function, but this does not change the alignment of the numericInput either.

Would there be a way to align these numericInput like the rest of the text?

EDIT: Added a screenshot of the desired alignment

library(shiny)

shinyInput <- function(FUN, len, id, ...) {
  inputs <- character(len)
  for (i in seq_len(len)) {
    inputs[i] <- as.character(FUN(paste0(id, i), ...))
  }
  inputs
}

df <- iris
df$num <- shinyInput(numericInput, nrow(df), "num_", label = NULL, value=NULL)

ui <- dashboardBody(box(fluidPage(DT::dataTableOutput('DTdf'))))

server <- function(input, output){
  dfDT <- reactive({df})
  
  output$DTdf <- DT::renderDT({
    datatable(dfDT(),
              escape=F,
              editable="all",
              options = list(
                columnDefs = list(list(className = "dt-center", targets="_all")),
                preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'),
                drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); } '))) %>%
      formatStyle(c(6), "vertical-align" = "middle")
    })
}

shinyApp(ui=ui, server=server)

`dt-center` *horizontally* centers. You mean horizontal centering? — Stéphane Laurent, Oct 09 '20 at 10:33
I want to center everything in my datatable both horizontally and vertically, my text is vertically centered but the numericInputs are not, I'm looking for a way to center those vertically. — Erlinska, Oct 09 '20 at 10:39
For the horizontal centering I would use `width="100%"` in the number input, so that the input fits the cell. Now I will run your code to see what you mean for the vertical centering. — Stéphane Laurent, Oct 09 '20 at 10:44
I added a picture to the post to show the intended alignment of the numericInputs. — Erlinska, Oct 09 '20 at 10:51

score 1 · Accepted Answer · answered Oct 09 '20 at 10:51

The number inputs are shifted up because of a bottom margin. You can remove it with the help of CSS:

CSS <- HTML("td .form-group {margin-bottom: 0;}")

ui <- dashboardBody(
  tags$head(tags$style(CSS)),
  box(
    fluidPage(
      DT::dataTableOutput('DTdf')
    )
  )
)

Vertical alignment of numericInput in DT

1 Answers1

Linked