1

Is there a way to have an inline/horizontal rank_list from the sortable package?

library(shiny)
library(sortable)

ui <- fluidPage(
  rank_list(labels = c("/", "26", "2022", "August", "/"), 
            input_id = "rank")
  
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

Gives:

enter image description here

But I would like to have the labels horizontal and slide horizontally over one another to construct a more readable date.

I tried rank_list(..., options = sortable_options(direction = "horizontal")) and also "vertical" but neither made a difference.

LMc
  • 12,577
  • 3
  • 31
  • 43

1 Answers1

3
library(shiny)
library(sortable)

ui <- fluidPage(
    div(
        style = "width: 500px", id = "my-ranklist",
        rank_list(labels = c("/", "26", "2022", "August", "/"), 
                  input_id = "rank"),
        tags$style(HTML(
            '
            #my-ranklist .rank-list {
                display: flex;
            }
            #my-ranklist .rank-list-item {
                width: 100px;
            }
            '
        ))
    )

    
)

server <- function(input, output, session) {
    
}

shinyApp(ui, server)

Change 500px for the whole container and 100px for each item to the width you want.

enter image description here

lz100
  • 6,990
  • 6
  • 29
  • +1 Thank you! Do you mind expanding on this slightly to show how this might work in `renderUI`? The `labels` are going to be reactive. I can update my post if that is helpful. – LMc Aug 26 '22 at 18:27
  • @LMc this is just CSS, so there will not be any big change with `renderUI`, but yes update the post and I will see if I understand your question. – lz100 Aug 26 '22 at 18:30
  • Nevermind that worked perfect in `renderUI`. Thanks for your help! – LMc Aug 26 '22 at 18:42
  • Do you have any advice on what `direction` does in the `option` argument? – LMc Aug 26 '22 at 18:47
  • 1
    It's working in the original JS library but not in Shiny. I think Shiny people introduced a bug here. See this https://sortablejs.github.io/Sortable/#example7 – lz100 Aug 26 '22 at 18:58