Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to display widgets inline in shiny

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?

like image 472
vanathaiyan Avatar asked Apr 19 '16 05:04

vanathaiyan


2 Answers

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

like image 189
Pork Chop Avatar answered Sep 17 '22 00:09

Pork Chop


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.

like image 28
Berecht Avatar answered Sep 17 '22 00:09

Berecht