如何调整 R Shiny 可排序存储桶列表的边距和宽度？

Question

我正在尝试编写一个用户界面，用户可以通过从左侧的存储桶列表拉到右侧的不同存储桶列表来对值进行分类。要命名类别，右侧每个存储桶列表顶部都有一个文本输入。为了让它看起来干净，我希望 textInput 与左侧和右侧的bucket_lists 处于同一水平，并且它们之间的垂直空间很小。

我能够使用“margin-left: -20px”等 CSS 样式调整存储桶列表的边距，但是当我使用“margin-left: 0”将边距设置为 0 时，什么也没有发生，而且我也没有知道如何调整宽度，使其与 textInput 相同。

总结一下：确保文本输入的左侧和右侧边框与存储桶列表相互对齐的最佳方法是什么？

下面是一个可重现的示例：

library(shiny)
library(sortable)

ui <- fluidPage(
  tags$head(
    # Note the wrapping of the string in HTML()
    tags$style(HTML("
      .buckets-right {
        margin-top: -25px;
        margin-left: -20px;
        margin-bottom: -10px;
        margin-right: -20px;
      }
      .bucket-left {
        margin-top: -20px;
        margin-left: -20px;
        margin-right: -10px;
      }
      
    "))
  ),
  column(6,
         bucket_list(
           header = NULL,
           group_name = "bucket_list_group",
           class = c("default-sortable", "bucket-left"),
           add_rank_list(
             text = "Values left",
             labels = c("One", "Two", "Three"),
             input_id = "list_orignal_values"
           )
         )
  ),
  column(6,
         tagList(
           textInput("name_cat1",
                     label = NULL),
           bucket_list(
             header = NULL,
             group_name = "bucket_list_group",
             orientation = "vertical",
             class = c("default-sortable", "buckets-right"),
             add_rank_list(
               text = NULL,
               labels = NULL,
               input_id = "list_cat1")
             ),
           ),
         tagList(
           textInput("name_cat2",
           label = NULL),
           bucket_list(
             header = NULL,
             group_name = "bucket_list_group",
             orientation = "vertical",
             class = c("default-sortable", "buckets-right"),
             add_rank_list(
               text = NULL,
               labels = NULL,
               input_id = "list_cat2")
           ),
         )
  )
)

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

shinyApp(ui, server)

Answer 1

你可以这样做：

在
• width = 100%

   中添加 

  textInput()

  （因为默认情况下有 

  300px

  ）。

添加（此处例如使用
• 5px

  ）
  

    .form-group {
      margin-top: 5px;
      margin-bottom: 5px;
    }

  这设置了您的要求，即您希望输入之间的垂直空间很小。

添加

•   .default-sortable.rank-list-container {
      margin: 0px;
    }
    .default-sortable.bucket-list-container {
      padding: 0px;
      margin: 0px;
    }

  这将删除默认设置的 

  sortable

   容器左侧和右侧的空白。

此处不相关，但请注意
• group_name = "bucket_list_group"

   充当 

  id

  ，因此您当前已重复 

  ids

  ，因此您应该使其唯一。

library(shiny)
library(sortable)

ui <- fluidPage(
  tags$head(
    # Note the wrapping of the string in HTML()
    tags$style(HTML("
      .form-group {
        margin-top: 5px;
        margin-bottom: 5px;
      }
      .default-sortable.rank-list-container {
        margin: 0px;
      }
      .default-sortable.bucket-list-container {
        padding: 0px;
        margin: 0px;
      }
    "))
  ),
  column(6,
         bucket_list(
           header = NULL,
           group_name = "bucket_list_group1",
           class = c("default-sortable", "bucket-left"),
           add_rank_list(
             text = "Values left",
             labels = c("One", "Two", "Three"),
             input_id = "list_orignal_values"
           )
         )
  ),
  column(6,
         tagList(
           textInput("name_cat1",
                     label = NULL,
                     width = "100%"),
           bucket_list(
             header = NULL,
             group_name = "bucket_list_group2",
             orientation = "vertical",
             class = c("default-sortable", "buckets-right"),
             add_rank_list(
               text = NULL,
               labels = NULL,
               input_id = "list_cat1")
           ),
         ),
         tagList(
           textInput("name_cat2",
                     label = NULL,
                     width = "100%"),
           bucket_list(
             header = NULL,
             group_name = "bucket_list_group3",
             orientation = "vertical",
             class = c("default-sortable", "buckets-right"),
             add_rank_list(
               text = NULL,
               labels = NULL,
               input_id = "list_cat2")
           ),
  
         )
  )
)

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

shinyApp(ui, server)