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