将 `selectInput` 和 `pickerInput` 内联排列在同一行

Question

在下面的应用程序中，我想在 shiny::selectInput 旁边放置一个 shinyWidgets::pickerInput inline。相同类型的两个输入（pickerInput 或 selectInput）可以放在同一行上，只需将它们包装在 div(style = "inline-block") 中即可。虽然下面的应用程序将输入放在同一行/行上，但它们在垂直方向上不在同一水平面上。我查看了 DOM 检查器，但不明白为什么会发生这种情况以及如何解决它。任何帮助表示赞赏。

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

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

  server = function(input, output, session) {

})

Answer 1

我发现这也是一个恼人的问题。我找到的最简单的解决方案是将两个控件包装在 fluidRow 中，每个控件都包装在自己的 column 中。这通常有效（在这种情况下似乎有效）。如果没有，那么我会调整 CSS 边框 and/or 填充设置，这是非常不令人满意的。

通过调整每列的 width 设置来调整控件的分隔。

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

shinyApp(ui = dashboardPage(
  
  header = dashboardHeader(title = "Test"), 
  sidebar = dashboardSidebar(disable = TRUE),
  body = dashboardBody(
    fluidRow(
        column(
          width=6,
          selectInput("test",
                    "Select Input",
                    choices = 1:3)
        ),
        column(
          width=6,
          pickerInput(
          inputId = "somevalue",
          label = "A label",
          choices = c("a", "b"))
        )
    )
  )
),

server = function(input, output, session) {
  
})

Answer 2

您可以使用 display:flex:

  body = dashboardBody(
    
    div(style = "display: flex;",
        
        selectInput("test",
                    "Select Input",
                    choices = 1:3),

        pickerInput(
          inputId = "somevalue",
          label = "A label",
          choices = c("a", "b")
        )
    )

Answer 3

这有帮助吗？

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

ui <- fluidPage(
  
  titlePanel("Hello Shiny!"),
  
  fluidRow(
    
    column(2,
           wellPanel(
             selectInput("test",
                         "Select Input",
                         choices = 1:3)
             
           )       
    ),
    
    column(2,
           pickerInput(
             inputId = "somevalue",
             label = "A label",
             choices = c("a", "b"))
    )
  )
)

阅读此内容了解更多信息：https://shiny.rstudio.com/articles/layout-guide.html

将 `selectInput` 和 `pickerInput` 内联排列在同一行

arrage `selectInput` and `pickerInput` inline on the same row

r

shiny

shinywidgets