How do I adjust the margin and width of R Shiny sortable bucket list?

I'm trying to write a UI where a user can categorize values by pulling from a bucket list on the left to different bucket lists on the right. To name the categories, there is a textInput on top of each bucket list on the right. For this to look clean, I would like the textInput to end level with the bucket_lists on the left and the right, and for there to be only little space between them vertically.

I was able to adjust the margin of the bucket lists with CSS styles like "margin-left: -20px", but nothing happens when I set the margin to 0 with "margin-left: 0", and I also don't know how to adjust the width so that it is the same as for the textInput.

To summarize: What is the best way to make sure that the borders to the left and the right of the text inputs and the bucket lists align with each other?

A reproducible example below:

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)

Solution

You could do it like this:

Add width = 100% in textInput() (since they have by default 300px).
Add (here e.g. with 5px)
```
  .form-group {
    margin-top: 5px;
    margin-bottom: 5px;
  }
```
This sets up your requirement that you want little space between the inputs vertically.

Add

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

This deletes whitespace to the left and right of the sortable containers which is set by default.

Unrelated here, but notice that group_name = "bucket_list_group" acts as an id, because the parameter css_id is not supplied and defaults to group_name, so you currently have duplicated ids. Below I added css_id in order to avoid this.

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_group",
           css_id = "group_1",
           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_group",
             css_id = "group_2",
             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_group",
             css_id = "group_3",
             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)