DT中numericInput的垂直对齐答案

【问题标题】：Vertical alignment of numericInput in DTDT中numericInput的垂直对齐
【发布时间】：2021-01-24 09:16:36
【问题描述】：

我一直在尝试垂直对齐由 dt 呈现的数据框内的元素，为此我在 datatable 函数的选项中使用了 className = "dt-center" 参数，而这适用于我的大多数元素数据框，它不会将 numericInput 居中。

我尝试将"vertical-align" = "middle" css 参数与formatStyle 函数一起使用，但这也不会改变 numericInput 的对齐方式。

有没有办法像文本的其余部分一样对齐这些 numericInput？

编辑：添加了所需对齐的屏幕截图

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 水平中心。你的意思是水平居中？
我想将我的数据表中的所有内容水平和垂直居中，我的文本垂直居中但 numericInputs 不是，我正在寻找一种垂直居中的方法。
对于水平居中，我将在数字输入中使用width="100%"，以便输入适合单元格。现在我将运行您的代码，看看您对垂直居中的含义。
我在帖子中添加了一张图片以显示 numericInputs 的预期对齐方式。

标签： r shiny dt

【解决方案1】：

由于底部边距，数字输入向上移动。您可以借助 CSS 将其删除：

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

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

【讨论】：