How to display widgets inline in shiny

Question

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?

Strange enough, if I use the RStudio Viewer, everything is aligned. Which browser are you using? — K. Rohde, Apr 19 '16 at 06:56

Pork Chop · Accepted Answer · 2022-08-17T07:58:41.890

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)

Thanks. this helped me. Also is there a way to create space between the widgets? — vanathaiyan, Apr 19 '16 at 09:02
@PorkChop Based on your answer reg. space between the (in-line) widgets, I like to know whether can we control the space between widgets when they are in different lines. Let's say I have '4' widgets in 2 rows X 2 columns, and want to reduce the space between the first row and second row. Pleas see [link](http://stackoverflow.com/questions/40028642/how-to-remove-pixels-corresponding-to-label-of-a-shiny-control-widget) — SatishR, Nov 03 '16 at 18:20
nice, but how would you do a 2 widgets x 2 rows in case of a `sidebarPanel`? — c1au61o_HH, Nov 18 '19 at 23:44

score 26 · Answer 2 · edited Dec 22 '21 at 20:19

26

You should create a fluidPage with a fluidRow and then use the column function.

     fluidPage(fluidRow(
                        column(2, selectInput()),
                        column(1, selectInput()),
                        column(2, textInput())
                        )
               )

More detail, look up fluidPage,fluidRow and column within shiny function references.

edited Dec 22 '21 at 20:19

NelsonGon

13,015
7
27
57

answered Apr 19 '16 at 06:56

Berecht

1,085
9
23

Yes. i tried this. taking your code as sample, i will not show the selectinput in some cases based on the user input. in that case textinput should appear first in the place of selectinput. but this is not happening using fluidrow. – vanathaiyan Apr 19 '16 at 07:15
1

This is not really producing inline objects. – randy Jul 03 '22 at 02:15

How to display widgets inline in shiny

2 Answers2

Linked