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

Question

In the app below I want to place a shinyWidgets::pickerInput inline next to a shiny::selectInput. Two inputs of the same kind (either pickerInput or selectInput) can be placed on the same line just by wrapping them in a div(style = "inline-block"). While the app below places the inputs on the same line / row they are not on the same level vertically. I looked at the DOM inspector but do not understand, why this is happening and how I can fix it. Any help appreciated.

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) {

})

score 2 · Accepted Answer · answered Aug 16 '21 at 10:28

2

You can use 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")
        )
    )

answered Aug 16 '21 at 10:28

Stéphane Laurent

75,186
15
119
225

Thanks! This looks very promising! Any idea why vertical alignment is broken when mixing both input types? Looking at the DOM I really don't understand whats causing the inputs to be off. – TimTeaFan Aug 16 '21 at 10:31
@TimTeaFan Sorry I don't understand your question. Could you rephrase? – Stéphane Laurent Aug 16 '21 at 10:33
`"display: inline-block;"` works when using two inputs of the same type. When mixing `selectInput` and `pickerInput` the vertical alignment is broken as shown in my post. Normally looking at the DOM inspector helps to understand why the inputs have a different vertical alignment, but in this case I have problems understanding what is causing the inputs to have a different vertical alignment. – TimTeaFan Aug 16 '21 at 10:36
Ah ok, I don't know. – Stéphane Laurent Aug 16 '21 at 10:37
Was this solved using HTML? Or is display:flex some shiny code? – ujjwal tyagi Aug 16 '21 at 10:54
2

@ujjwaltyagi It's standard CSS. – Stéphane Laurent Aug 16 '21 at 10:56

score 1 · Answer 2 · answered Aug 16 '21 at 10:23

I've found this to be an irritating problem as well. The simplest solution I've found is to wrap both the controls in a fluidRow and each in its own column. This usually works (and seems to in this case). If it doesn't, then I resort to tweaking CSS borders and/or padding settings, which is very unsatisfactory.

Adjust the separation of the controls by playing with the width setting of each column.

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) {
  
})

+1 for the fast answer, which solves the problem. However, I would like to refrain from wrapping each input in `column`, because I'd like to have the inputs in a row without unnecessary spaces in between. It would be great if a nice CSS solution existed to solve this problem. — TimTeaFan, Aug 16 '21 at 10:28
Happy to help. Try `width=4` rather than `width=6` to reduce the white space. But I think @StephaneLaurent may have your ideal solution. — Limey, Aug 16 '21 at 10:31

score 0 · Answer 3 · answered Aug 16 '21 at 10:47

Does this help?

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"))
    )
  )
)

Read this for more info: https://shiny.rstudio.com/articles/layout-guide.html

Thanks for your answer. Limey above has already suggested to wrap the inputs in `column`. My comment there applies here as well. — TimTeaFan, Aug 16 '21 at 11:12

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

3 Answers3