在 renderUI 中生成的 selectizeInput 和 numericInputs 的 Alignment

Question

我有一个应用程序，用户将为每个selectizeInput生成一堆selectizeInput和 3 个numericInput 。 我遇到的问题是selectizeInput不能很好地与numericInput对齐，一旦你有大约 10 行，alignment 就完全消失了。

我想到了两种解决这个问题的方法：

1. 创建一个renderUI function 并在循环中包含fluidRow但一些搜索让我相信这是不可能的。
2. 使用tags$style(type = "text/css", ".form-control.shiny-bound-input, .selectize-input {height: 46px;}"),但我不想调整selectizeInput高度普遍，因为应用程序在其他地方有 selectizeInputs。 我不能用tags$style(type = "text/css", "#some_id.form-control.shiny-bound-input {height: 46px;}")对输入名称进行硬编码，因为名称是由动态生成的用户。

这两个选项之一会起作用吗？ 如果没有，还有第三种选择吗？

我已经制作了以下问题的演示版本。

library(shiny)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(width = 3, br(),br(),br(),br(),br(),br(),br(), h6("something else is here")),
    mainPanel(
      tabsetPanel(
        tabPanel("Problem tab",
                 br(),
                 numericInput("inputs_num","Enter Number of Channels to Calibrate", min = 1, value = 10),
                 hr(),
                 br(),
                 fluidRow(
                   column(width= 3,uiOutput("colname")),
                   column(width =3, uiOutput("initial_numeric")),
                   column(width =3, uiOutput("min_numeric")),
                   column(width =3, uiOutput("max_numeric"))
                 ),
                 hr()
                 )
      )
    )
  )
)

server <- function(input, output, server){
  
  output$colname <- renderUI({
    req(input$inputs_num)
    columns <- colnames(mtcars)
    tags <- tagList()
    for(i in 1:input$inputs_num){
      tags[[i]] = selectizeInput(paste0("colname_",i), paste0("Column ",i), choices = columns, selected = NULL,
                                 options = list(
                                   placeholder = "Enter Column Name",
                                   onInitialize = I('function() { this.setValue(""); }')
                                 ))
    }
    tags
  })
  
  
  output$initial_numeric <- renderUI({
    req(input$inputs_num)
    tags <- tagList()
    for (i in 1:input$inputs_num){
      tags[[i]] <- numericInput(paste0("initial_",i), paste("Initial",i), min = 0,value = 1)
    }
    tags
  })
  
  output$min_numeric <- renderUI({
      req(input$inputs_num)
    tags <- tagList()
    for (i in 1:input$inputs_num){
      tags[[i]] <- numericInput(paste0("min_",i), paste("Min",i), min = 0,value = 1)
    }
    tags
  })
  
  output$max_numeric <- renderUI({
    req(input$inputs_num)
    tags <- tagList()
    for (i in 1:input$inputs_num){
      tags[[i]] <- numericInput(paste0("max_",i), paste("Max",i), min = 0,value = 1)
    }
    tags
  })
 

}

shinyApp(ui, server)

Answer 1

在 Safari 中，一切都很好地对齐，只有在 Firefox 中它才变得可见。 我尝试将所有内容包装在一个循环中，它似乎工作正常，即使在 Firefox 中也是如此。

所以下面的方法应该对应于解决方案 1。由于解决方案 2（通用更改输入的 css）不是一种选择，另一种方法是通过将原始输入包装在标签中并添加额外的 class 来定义自定义输入，它可以然后以 css 为目标。 但我认为这没有必要，因为下面的方法有效。

library(shiny)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(width = 3, br(),br(),br(),br(),br(),br(),br(), h6("something else is here")),
    mainPanel(
      tabsetPanel(
        tabPanel("Problem tab",
                 br(),
                 numericInput("inputs_num","Enter Number of Channels to Calibrate", min = 1, value = 10),
                 hr(),
                 br(),
                 uiOutput("all"),
                 hr()
        )
      )
    )
  )
)

server <- function(input, output, server){

  output$all <- renderUI({
    req(input$inputs_num)
    columns <- colnames(mtcars)
    tags <- tagList()
    for(i in 1:input$inputs_num){
      tags[[i]] <- fluidRow(
        column(width= 3,
          selectizeInput(paste0("colname_",i), paste0("Column ",i), choices = columns, selected = NULL,
                       options = list(
                         placeholder = "Enter Column Name",
                         onInitialize = I('function() { this.setValue(""); }')
                       ))),
        column(width= 3,
          numericInput(paste0("initial_",i), paste("Initial",i), min = 0,value = 1)),
        column(width= 3,
          numericInput(paste0("min_",i), paste("Min",i), min = 0,value = 1)),
        column(width= 3,
          numericInput(paste0("max_",i), paste("Max",i), min = 0,value = 1))
      )
    }
    tags
  })
    
}

shinyApp(ui, server)