在 Shiny 中，如何设置 CSS 网格，使嵌在列中的面板相互独立延伸？

Question

我是 CSS/HTML 的新手，正在跌跌撞撞。一位网络程序员告诉我，我正在有效地寻找一个“弹性框”。

我正在 CSS 中设置一个 2 列网格，其中左列将有一系列输入面板，其中值 dragged/dropped 到右列中的单个面板.左栏面板将始终具有固定高度。当用户 drags/drops 进入其中时，单个右栏面板会垂直扩展，正如它目前根据下面的可重现代码所做的那样。我希望右栏面板的展开不会改变左栏面板的高度。

如何做到这一点？

底部的图片更好地解释。

可重现代码：

library(shiny)
library(sortable)   
library(htmlwidgets)

icon_list <- function(x){lapply(x,function(x) {tags$div(tags$strong(x))})}

ui <- fluidPage(

# parent (I think!):        
  div(style = "margin-top: 2rem; width: 60%; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;",
  
  # the below 3 div(...) are children of the above parent div(...)
  
    div(class = "panel panel-default",
        div(class = "panel-heading", "Drag from here"),
        div(class = "panel-body", 
            id= "sort1",
            icon_list(c("A","B","C","D","E"))
            )
    ),
    div(class = "panel panel-default",
        div(class = "panel-heading", "Drag to here"),
        div(class = "panel-body", 
            id = "sort2"
            )
    ),
        
    div(class = "panel panel-default",
        div(class = "panel-heading", "Trash bin"),
        div(class = "panel-body", 
            id = "sortable_bin"
            )
    )
  
  ),
  sortable_js(
    "sort1",
    options = sortable_options(
      group = list(
        pull = "clone",
        name = "sortGroup1",
        put = FALSE)
    )
  ),
  sortable_js(
    "sort2",
    options = sortable_options(
      group = list(
        group = "sortGroup1",
        put = TRUE,
        pull = TRUE)
    )
  ),
  sortable_js(
    "sortable_bin",
    options = sortable_options(
      group = list(
        group = "sortGroup1",
        put = TRUE,
        pull = TRUE),
      onAdd = htmlwidgets::JS("function (evt) { this.el.removeChild(evt.item); }")
    )
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

解释性图片：

Answer 1

css-grid 搞砸了一些事情，如果你添加 align-items: start 而不是页面下方的元素“运行”，所以我将你拥有的 2x2 网格包装到一个 1x1，其中左列包含“从此处拖动”和“垃圾箱”的 div：

library(shiny)
library(sortable)
library(htmlwidgets)

icon_list <- function(x) {
  lapply(x, function(x) {
    tags$div(tags$strong(x))
  })
}

ui <- fluidPage(

  # parent (I think!):
  div(
    style = "margin-top: 2rem; width: 60%; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start;",

    # the below 3 div(...) are children of the above parent div(...)
    div(
      div(
        class = "panel panel-default",
        div(class = "panel-heading", "Drag from here"),
        div(
          class = "panel-body",
          id = "sort1",
          icon_list(c("A", "B", "C", "D", "E"))
        )
      ),
      div(
        class = "panel panel-default",
        div(class = "panel-heading", "Trash bin"),
        div(
          class = "panel-body",
          id = "sortable_bin"
        )
      )
    ),
    div(div(
      class = "panel panel-default",
      div(class = "panel-heading", "Drag to here"),
      div(
        class = "panel-body",
        id = "sort2"
      )
    ))
  ),
  sortable_js(
    "sort1",
    options = sortable_options(
      group = list(
        pull = "clone",
        name = "sortGroup1",
        put = FALSE
      )
    )
  ),
  sortable_js(
    "sort2",
    options = sortable_options(
      group = list(
        group = "sortGroup1",
        put = TRUE,
        pull = TRUE
      )
    )
  ),
  sortable_js(
    "sortable_bin",
    options = sortable_options(
      group = list(
        group = "sortGroup1",
        put = TRUE,
        pull = TRUE
      ),
      onAdd = htmlwidgets::JS("function (evt) { this.el.removeChild(evt.item); }")
    )
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

在 Shiny 中，如何设置 CSS 网格，使嵌在列中的面板相互独立延伸？

In Shiny, how to set CSS grid so that the panels embedded in columns extend independently of each other?

html

css

r

shiny

sortablejs