Предполагая следующее приложение от здесь.
Как
rank_list_1, до определенного размера (РЕШЕНО, используя стиль, т.е. max-height: 700px)Таким образом, полоса прокрутки должна появиться с правой стороны контейнера, если список элементов слишком длинный. Есть такая функция автопрокрутки, но я так и не разобрался, как ей правильно пользоваться: https://github.com/SortableJS/Sortable/tree/master/plugins/AutoScroll#options
Демо: https://jsbin.com/dosilir/edit?js, вывод
library(shiny)
library(sortable)
ui <- fluidPage(
tags$head(
tags$style(HTML(".bucket-list-container {min-height: 350px;}"))
),
fluidRow(
column(
width = 12,
#choose list of variable names to send to bucket list
radioButtons(inputId = "variableList",
label = "Choose your variable list",
choices = c("names(mtcars)" = "names(mtcars)","state.name" = "state.name")),
#input text to subset variable names
textInput(
inputId = "subsetChooseListText",
label = "Input text to subset list of states to choose from",
value = "c"
),
div(
# class value is current default class value for container
class = "bucket-list-container default-sortable",
"Drag the items in any desired bucket",
div(
# class value is current default class value for list
class = "default-sortable bucket-list bucket-list-horizontal",
# need to make sure the outer div size is respected
# use the current default flex value
uiOutput("selection_list", style = "flex:1 0 200px;"),
rank_list(
text = "to here",
labels = list(),
input_id = "rank_list_2",
options = sortable_options(group = "mygroup")
),
rank_list(
text = "and also here",
labels = list(),
input_id = "rank_list_3",
options = sortable_options(group = "mygroup")
)
)
)
)
),
fluidRow(
column(
width = 12,
tags$b("Result"),
column(
width = 12,
tags$p("input$rank_list_1"),
verbatimTextOutput("results_1"),
tags$p("input$rank_list_2"),
verbatimTextOutput("results_2"),
tags$p("input$rank_list_3"),
verbatimTextOutput("results_3")
)
)
)
)
server <- function(input,output) {
#initialize reactive values
varList <- reactive({
req(input$variableList)
if (input$variableList == "state.name") {
state.name
} else {
paste0(rep(names(mtcars), 20),"_", 1:220)
}
})
subsetChooseList <- reactive({
items <- varList()
pattern <- input$subsetChooseListText
if (nchar(pattern) < 1) {
return(items)
}
items[
grepl(
x = items,
pattern = input$subsetChooseListText,
ignore.case = TRUE
)
]
})
output$selection_list <- renderUI({
labels <- subsetChooseList()
# remove already chosen items
labels <- labels[!(
labels %in% input$rank_list_2 |
labels %in% input$rank_list_3
)]
rank_list(
text = "Drag from here",
labels = labels,
input_id = "rank_list_1",
options = sortable_options(group = "mygroup")
)
})
#visual output for debugging
output$results_1 <- renderPrint(input$rank_list_1)
output$results_2 <- renderPrint(input$rank_list_2)
output$results_3 <- renderPrint(input$rank_list_3)
}
shinyApp(ui, server)



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Я посмотрел на ваш код. Сначала вам нужно будет обернуть содержимое списка другим div, после чего вам нужно будет определить его ширину и высоту либо в процентах, либо в пикселях, затем установить переполнение для div-оболочки, и полоса прокрутки должна отображаться на правая сторона.
Надеюсь, это помогло.
Вот решение. Взято из демонстрации пузырей колла: https://jsbin.com/kesewor/edit?html,css,js,output
CSS overflow-y: auto; с height делает свою работу.
library(shiny)
library(sortable)
ui <- fluidPage(
fluidRow(
column(
width = 12,
#choose list of variable names to send to bucket list
radioButtons(inputId = "variableList",
label = "Choose your variable list",
choices = c("names(mtcars)" = "names(mtcars)","state.name" = "state.name")),
#input text to subset variable names
textInput(
inputId = "subsetChooseListText",
label = "Input text to subset list of states to choose from",
value = "c"
),
div(
# class value is current default class value for container
class = "bucket-list-container default-sortable",
"Drag the items in any desired bucket",
div(
# class value is current default class value for list
class = "default-sortable bucket-list bucket-list-horizontal",
# need to make sure the outer div size is respected
# use the current default flex value
div(
style = "
max-height: 250px;
overflow-y: auto;",
uiOutput("selection_list", style = "flex:1 0 200px;")),
rank_list(
text = "to here",
labels = list(),
input_id = "rank_list_2",
options = sortable_options(group = "mygroup")
),
rank_list(
text = "and also here",
labels = list(),
input_id = "rank_list_3",
options = sortable_options(group = "mygroup")
)
)
)
)
),
fluidRow(
column(
width = 12,
tags$b("Result"),
column(
width = 12,
tags$p("input$rank_list_1"),
verbatimTextOutput("results_1"),
tags$p("input$rank_list_2"),
verbatimTextOutput("results_2"),
tags$p("input$rank_list_3"),
verbatimTextOutput("results_3")
)
)
)
)
server <- function(input,output) {
#initialize reactive values
varList <- reactive({
req(input$variableList)
if (input$variableList == "state.name") {
state.name
} else {
paste0(rep(names(mtcars), 20),"_", 1:220)
}
})
subsetChooseList <- reactive({
items <- varList()
pattern <- input$subsetChooseListText
if (nchar(pattern) < 1) {
return(items)
}
items[
grepl(
x = items,
pattern = input$subsetChooseListText,
ignore.case = TRUE
)
]
})
output$selection_list <- renderUI({
labels <- subsetChooseList()
# remove already chosen items
labels <- labels[!(
labels %in% input$rank_list_2 |
labels %in% input$rank_list_3
)]
rank_list(
text = "Drag from here",
labels = labels,
input_id = "rank_list_1",
options = sortable_options(group = "mygroup")
)
})
#visual output for debugging
output$results_1 <- renderPrint(input$rank_list_1)
output$results_2 <- renderPrint(input$rank_list_2)
output$results_3 <- renderPrint(input$rank_list_3)
}
shinyApp(ui, server)
Хорошая идея, но как? :)