r - 如何强制使用相同的 Shiny 输入标签高度？

Question

问题描述

对于一个 Shiny 的应用程序，我想在我的应用程序中像布局一样并排显示多个 selectInputs。不幸的是，如果标签中存在破坏应用程序流程的换行符，则选择字段不会对齐。

情况

这是我的示例代码，我修改了selectInput中的示例:

## Only run examples in interactive R sessions
if (interactive()) {
  
  
  
  # demoing group support in the `choices` arg
  shinyApp(
    ui = fluidPage(
      mainPanel(
        flowLayout(
          selectInput("state", "Choose a state:",
                      list(`East Coast` = list("NY", "NJ", "CT"),
                           `West Coast` = list("WA", "OR", "CA"),
                           `Midwest` = list("MN", "WI", "IA")),
          ),
          selectInput("stat2", "Variable description with a way longer description to enforce linebreak:",
                      list(`East Coast` = list("NY", "NJ", "CT"),
                           `West Coast` = list("WA", "OR", "CA"),
                           `Midwest` = list("MN", "WI", "IA")),
          )),# end of inputs
        
        textOutput("result"),
        width = 12
      )),
    server = function(input, output) {
      output$result <- renderText({
        paste("You chose", input$state)
      })
    }
  )
}

结果是:

目标

我希望输入字段始终处于同一高度水平，如下所示:

splitLayout 有点这样做，但如果页面要缩小标签并添加使 UI 复杂化的 y 滚动条，它就会崩溃，尤其是对于更大的标签:

不幸的是，我没有 WebDev 方面的经验，因此有点不知所措。有人可以帮我解决这个问题吗？

Answer 1

CSS 可以解决问题。

style = "display:flex;align-items:flex-end"

在 flowLayout 中包含此样式是否可以帮助您解决问题？

if (interactive()) {
  
  
  
  # demoing group support in the `choices` arg
  shinyApp(
    ui = fluidPage(
      mainPanel(
        flowLayout(
          style = "display:flex;align-items:flex-end",
          selectInput("state", "Choose a state:",
                      list(`East Coast` = list("NY", "NJ", "CT"),
                           `West Coast` = list("WA", "OR", "CA"),
                           `Midwest` = list("MN", "WI", "IA")),
          ),
          selectInput("stat2", "Variable description with a way longer description to enforce linebreak:",
                      list(`East Coast` = list("NY", "NJ", "CT"),
                           `West Coast` = list("WA", "OR", "CA"),
                           `Midwest` = list("MN", "WI", "IA")),
          )),# end of inputs
        
        textOutput("result"),
        width = 12
      )),
    server = function(input, output) {
      output$result <- renderText({
        paste("You chose", input$state)
      })
    }
  )
}