How to display widgets inline in shiny

vanathaiyan picture vanathaiyan · Apr 19, 2016 · Viewed 22.5k times · Source

I have the below code to display the widgets inline(in same row) in shiny

div(style="display:inline-block; width: 150px;height: 75px;",selectInput("ddllgra", "Function:",c('mean','median','sd','count','min','max'), selected='mean')),
div(style="display:inline-block; width: 150px;height: 75px;",textInput(inputId="xlimitsmax", label="x-max", value = 0.5))

It is coming out in UI, but not in the same line order. one in coming in the upper side and other is coming on the lower side one the same line.

Is there a way to correct this misalignment?

Answer

Pork Chop picture Pork Chop · Apr 19, 2016

Add vertical-align:top to your style

rm(list = ls())
library(shiny)

ui <- fluidPage(
    sidebarPanel(
          div(style="display: inline-block;vertical-align:top; width: 150px;",selectInput("ddllgra", "Function:",c('mean','median','sd','count','min','max'), selected='mean')),
          div(style="display: inline-block;vertical-align:top; width: 150px;",textInput(inputId="xlimitsmax", label="x-max", value = 0.5))),
    mainPanel()
)
server <- shinyServer(function(input,output){})
shinyApp(ui, server)

enter image description here

Edit: How to add space between the divs

You can use the same approach: Example below has 100px between the divs

rm(list = ls())
library(shiny)

ui <- fluidPage(
  sidebarPanel(
    div(style="display: inline-block;vertical-align:top; width: 150px;",selectInput("ddllgra", "Function:",c('mean','median','sd','count','min','max'), selected='mean')),
    div(style="display: inline-block;vertical-align:top; width: 100px;",HTML("<br>")),
    div(style="display: inline-block;vertical-align:top; width: 150px;",textInput(inputId="xlimitsmax", label="x-max", value = 0.5))),
  mainPanel()
)
server <- shinyServer(function(input,output){})
shinyApp(ui, server)

enter image description here