CODEWITHSUNDEEP
rshinyshinywidgets
TimTeaFan
TimTeaFan

Reputation: 18551

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

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.

enter image description here

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

})

Upvotes: 2

Views: 1472

Answers (3)

ujjwal tyagi
ujjwal tyagi

Reputation: 493

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

Upvotes: 0

St&#233;phane Laurent
St&#233;phane Laurent

Reputation: 84529

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

enter image description here

Upvotes: 4

Limey
Limey

Reputation: 12461

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.

enter image description here

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

Upvotes: 1

Related Questions