I have a selectInput in a Shiny DT datatable. I needed to apply custom javascript to selectize the selectInput due to a formatting issue when using multiple = T (see other post: Shiny DT datatable using selectInput with multiple = TRUE). (As a side note, I also noticed that I must have a selectInput outside the datatable for the javascript to work, hence the hidden "dummy" selectInput; I would love to know why this is). When I do this, I am unable to vertically center the selectInput on its row. In the code below, if the initComplete line is commented out, the selectInput is vertically centered (due to the margin-bottom: 0 css), but the correct appearance and multiple selections are lost. I would appreciate help getting the selectInput vertically centered while keeping the correct formatting. Note that I've left out some additional javascript for binding/unbinding inputs to keep the code minimal.
require(shiny)
require(DT)
# Function to selectize one or more input ids
SelectizeIDs <- function(ids) {
myStrings <- as.character(sapply(ids, function(id) {
paste0(" $('#", id, "').selectize();")
}))
c(
"function(settings){",
myStrings,
"}"
)
}
shinyApp(
ui = fluidPage(
tags$head(tags$style(HTML("td .form-group {margin-bottom: 0;}"))),
# Dummy selectInput is needed for SelectizeIDs() to work, not sure why
div(style = "display: none;", selectInput(inputId = "dummy", label = NULL, choices = 1:2)),
DT::dataTableOutput("mytable")
),
server = function(input, output, session) {
output$mytable <- DT::renderDataTable({
DT::datatable(
data = data.frame(
Col1 = as.character(selectInput(
inputId = "id1",
label = NULL,
choices = letters,
multiple = T
))
),
escape = F,
selection = "none",
options = list(
initComplete = JS(SelectizeIDs("id1"))
)
)
})
}
)
Here is a screenshot using the code above showing the selectInput properly formatted but not vertically centered:
Here is a screenshot using the code above but commenting out the initComplete line, showing the selectInput improperly formatted but vertically centered:
