如何将Shiny的selectInput与pickerInput行内同排并实现垂直对齐

错位示例 #

问题根因 #

shiny原生selectInput和shinyWidgets提供的pickerInput默认CSS盒模型参数不一致，两者的标签外边距、输入框容器的基线位置存在差异。inline-block元素默认的垂直对齐基准为基线，两个控件的基线位置不统一，因此会出现垂直错位。

修复方法 #

给包裹两个输入控件的div统一添加vertical-align: top属性，将两者的垂直对齐基准统一调整为元素顶部，即可解决错位问题。可额外添加margin-right属性调整两个控件的水平间距，避免贴靠过紧。

修改后可运行代码 #

library(shiny)
library(shinydashboard)
library(shinyWidgets)

shinyApp(ui = dashboardPage(
  
  header = dashboardHeader(title = "Test"), 
  
  sidebar = dashboardSidebar(disable = TRUE),
  
  body = dashboardBody(
  
    div(style = "display: inline-block;vertical-align: top; margin-right: 15px;",
      selectInput("test",
                  "Select Input",
                  choices = 1:3)
    ),
    
    div(style = "display: inline-block;vertical-align: top;",
      pickerInput(
        inputId = "somevalue",
        label = "A label",
        choices = c("a", "b")
      )
    )
  
  )
  ),

  server = function(input, output, session) {

})

排版适配说明 #

如果需要按输入框底部对齐，只需将vertical-align的属性值改为bottom即可；如果需要按标签文本的基线对齐，可以将属性值改为text-top，可根据实际排版需求灵活调整。

内容的提问来源于stack exchange，提问作者TimTeaFan