在Shiny中，如何設定CSS網格，以便嵌入在列中的面板相互獨立擴展？

我對 CSS/HTML 完全陌生，并且正在磕磕絆絆。一位網路程式員告訴我，我正在有效地尋找“彈性盒子”。

我在 CSS 中設定了一個 2 列網格，其中左列將有一系列輸入面板，其中值被拖放到右列的單個面板中。左欄面板的高度總是固定的。當用戶拖放到其中時，單個右欄面板會垂直擴展，正如下面可重現的代碼目前所做的那樣。我希望右列面板的擴展不改變左列中面板的高度。

如何才能做到這一點？

底部的影像更好地解釋了。

可重現的代碼：

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)

說明圖：

uj5u.com熱心網友回復：

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)

標籤：html css r 闪亮的 可排序的js

上一篇：如何在列行中添加新字串

下一篇：如何合并資料框中具有相同前綴的行？