如何调整Sortable组件横向rank list的宽度占比与间距？

一、设置宽度比例 #

横向布局的rank list可通过CSS直接指定宽度比例，利用每个rank list的input_id定位对应容器，设置width属性即可。比如让左侧“Drag from here”占30%宽度，右侧“to here”占70%。

二、缩小列表间距 #

横向排列的bucket list默认存在间距，修改.bucket-list-horizontal类的gap属性（flex布局的间距参数），就能调整两个列表之间的距离。

修改后的完整代码 #

## Example shiny app with bucket list

library(shiny)
library(sortable)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      .bucket-list-container {min-height: 350px;}
      /* 自定义两个rank list的宽度比例 */
      #rank_list_1 .rank-list {
        width: 30%;
      }
      #rank_list_2 .rank-list {
        width: 70%;
      }
      /* 缩小横向列表之间的间距 */
      .bucket-list-horizontal {
        gap: 10px; /* 可根据需求调整数值，单位支持px、%等 */
      }
    "))
  ),
  fluidRow(
    column(
      tags$b("Exercise"),
      width = 12,
      bucket_list(
        header = "Drag the items in any desired bucket",
        group_name = "bucket_list_group",
        orientation = "horizontal",
        add_rank_list(
          text = "Drag from here",
          labels = list(
            "one",
            "two",
            "three",
            htmltools::tags$div(
              htmltools::em("Complex"), " html tag without a name"
            ),
            "five" = htmltools::tags$div(
              htmltools::em("Complex"), " html tag with name: 'five'"
            )
          ),
          input_id = "rank_list_1"
        ),
        add_rank_list(
          text = "to here",
          labels = NULL,
          input_id = "rank_list_2"
        )
      )
    )
  ),
  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$bucket_list_group"),
        verbatimTextOutput("results_3")
      )
    )
  )
)

server <- function(input, output, session) {
  output$results_1 <- 
    renderPrint(
      input$rank_list_1 # 对应第一个rank list的input_id
    )
  output$results_2 <- 
    renderPrint(
      input$rank_list_2 # 对应第二个rank list的input_id
    )
  output$results_3 <- 
    renderPrint(
      input$bucket_list_group # 对应bucket list的group_name
    )
  
}


shinyApp(ui, server)

补充说明 #

• 宽度比例可根据需求修改width的百分比数值，比如改成25%和75%等。
• 间距调整除了用gap，也可以给单个列表设置margin-right或margin-left，比如给左侧列表加margin-right: 5px;来单独控制单边间距。

内容的提问来源于stack exchange，提问作者ava