Question: Getting `orderInput()` to position vertical and add from bottom (like stack).

[tintinthong]

orderInput() tends to arrange all its blocks in horizontal manner increasing from left to right. I was wondering whether there is a solution to add style that enables all the blocks to stack vertically. So as I submit more blocks it will begin to increase upwards to some maximum limit. Here is an example code that enables me to add blocks. Please help.

itemsList<-c('one','two','three','four')

server <- function(input, output) {

    output$sort1<-renderUI({
         orderInput(itemsList[1], 'one', items = items()$one,
                    connect= itemsList[itemsList!='items1'], item_class = 'info')
    })

  output$sort2<-renderUI({
    orderInput(itemsList[2], 'two', items = items()[['two']],
               connect =itemsList[itemsList!='items2'], item_class = 'primary')
  })

  items<-eventReactive(
    input$submit,{

      obj<-list(
        'one'=input$one_order,
        'two'=input$two_order
      )

      if(input$numberIn==1){
        obj$one<-c(obj$one,input$numberIn)
      }else {
        obj$two<-c(obj$two,input$numberIn)
      }

      return(
        obj
        )
    }
  )

}

ui<-fluidPage(

  sliderInput("numberIn", "Score:",min = 1, max = 7,value = 4),
  actionButton("submit", "Submit"),

  uiOutput('sort1'),
  uiOutput('sort2')
)

shinyApp(ui, server)

[Yang-Tang]

Hi @tintinthong , you can't do this by orderInput(), but you can create vertical bottom using jqui_sortable() like this:

library(shiny)
library(shinyjqui)

ui <- fluidPage(

  jqui_sortable(

    div(

      id = "foo",

      # to create a set of vertical buttons
      class = "btn-group-vertical",

      div("one", class = "btn btn-primary"),
      div("two", class = "btn btn-info"),
      div("three", class = "btn btn-success")

    ),

    # connect the button set with another one with id = "bar"
    options = list(connectWith = "#bar")

  ),

  verbatimTextOutput("order")

)

server <- function(input, output, session) {
  output$order <- renderPrint({
    # show order of items
    input$foo_order$text
  })
}

shinyApp(ui, server)

[tintinthong]

Thanks @Yang-Tang.