Inline uiOutput in R Shiny

Question

I am trying to generate a sequence depending on the selectInputs by users. The problem now is that layout of the sequence is vertical. My question is how to align them horizontally or inline. I tried to set uiOutput as inline=TRUE, but it did not work as expected. A similar question was asked previously on shiny google group with the code (https://groups.google.com/forum/#!searchin/shiny-discuss/inline$20uioutput%7Csort:date/shiny-discuss/WD9jh_mHArM/_bYFR_MVBgAJ), and it used slightly different user interface as add/remove letter in my case.

library(shiny)
sequence <- letters[1:20]

ui <- fluidPage(
  h2("Sequence Length:"),
  fluidRow(column(width=10, numericInput("seqlen", label=NULL, value=10))),

  h2("Sequence:"),
  fluidRow(column(width=10, uiOutput("selects")))

)

server <- function(input, output){

  output$selects <- renderUI({
    len <- as.integer(input$seqlen)
    lapply(1:len, function(i) {
      selectInput(inputId = paste0("letter", i),
                  label = NULL,
                  choices = sequence,
                  width="15%")
    })

  })

}

runApp(list(ui=ui, server=server))

score 4 · Accepted Answer · answered Feb 05 '18 at 22:50

I'd recommend using display: inline-block in CSS to inline divs. Since you can't really customize the outer selectInput div, you could wrap it in a new div like

library(shiny)
sequence <- letters[1:20]

ui <- fluidPage(
  h2("Sequence Length:"),
  fluidRow(column(width=10, numericInput("seqlen", label=NULL, value=10))),

  h2("Sequence:"),
  fluidRow(column(width=10, uiOutput("selects")))
)

server <- function(input, output){

  output$selects <- renderUI({
    len <- as.integer(input$seqlen)
    lapply(1:len, function(i) {
      div(
        selectInput(
          inputId = paste0("letter", i),
          label = NULL,
          choices = sequence
        ), 
        style = "display: inline-block;"
      )
    })
  })
}

runApp(list(ui=ui, server=server))

A stylesheet might be better than the inline CSS here, especially if you wanted to customize other properties like margin, width, etc.

score 3 · Answer 2 · answered Feb 05 '18 at 20:57

3

Here is one possible solution, we simply wrap the selectInput elements in columns:

library(shiny)
sequence <- letters[1:20]

ui <- fluidPage(
  h2("Sequence Length:"),
  fluidRow(column(width=10, numericInput("seqlen", label=NULL, value=10))),

  h2("Sequence:"),
  fluidRow(column(width=10, uiOutput("selects")))

)

server <- function(input, output){

  output$selects <- renderUI({
    len <- as.integer(input$seqlen)

    lapply(1:len, function(i) {
      column(width=2,
          selectInput(inputId = paste0("letter", i),
                  label = NULL,
                  choices = sequence))
    })

  })

}

runApp(list(ui=ui, server=server))

Hope this helps!

answered Feb 05 '18 at 20:57

Florian

24,425
4
49
80

Thanks, Florian. Both yours and Greg's solution worked. – Jian Feb 06 '18 at 14:22
I think his solution is cleaner too ;) – Florian Feb 06 '18 at 14:55
Can we use html tags in the server section of shiny too? – Lazarus Thurston Jan 24 '19 at 03:03

Inline uiOutput in R Shiny

2 Answers2