shinyjqui orderinput输入按钮大小[CSS]

Question

我正在使用class = "btn-group-vertical",垂直对齐我的orderInput，我希望拖放区域也垂直对齐在它旁边。我尝试使用fluidRows和列大小为6来使两个div相邻

但当前的输出如下所示：

​

​

library(shiny)
library(shinyjqui)

ui <- fluidPage(


  sidebarPanel(
    fluidRow(
      selectInput("RECIPE", "",
                  c("A1" = "A",
                    "C2 & D3" = "CD",
                    "None" = "none"),
                  selected = "none")
    ),

    fluidRow(
      column(6, div(id = "row_container",
                 style = "min-height: 500px;
                 margin-top: 0.5em; margin-left:-1em;
                 border-style: dotted;
                 border-color: #A9A9A9;
                 border-width: 2px;", uiOutput('row'))),
      column(6, div(id = "row_container",
                    style = "min-height: 500px;
                    margin-top: 0.5em; margin-left:-1em;
                    border-style: dotted;
                    border-color: #A9A9A9;
                    border-width: 2px;", uiOutput('row_output')))
    )
  ),

  mainPanel(verbatimTextOutput('order'))

)

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

  output$order <- renderPrint({ 
    print(input$row_dest_order) 
  })


  # Create shinyjqui output, and re-trigger when action button is clicked
  output$row <- renderUI({
    switch(
      input$RECIPE,
      A = orderInput('row_source', 'Row', class = "btn-group-vertical", items = c("B", "C", "D"), connect = 'row_dest'),
      CD = orderInput('row_source', 'Row',  class = "btn-group-vertical", items = c("A", "B"), connect = 'row_dest'),
      orderInput('row_source', 'Row',  class = "btn-group-vertical", items = c("A", "B", "C", "D"), connect = 'row_dest')
    )
  })

  output$row_output <- renderUI({
    switch(
      input$RECIPE,
      A = orderInput('row_dest', '', items = c("A"), connect = 'row_source', class = "btn-group-vertical"),
      CD = orderInput('row_dest', '', items = c("C", "D"), connect = 'row_source', class = "btn-group-vertical"),
      orderInput('row_dest', '', items = NULL, connect = 'row_source', class = "btn-group-vertical")
    )
  })


}

shinyApp(ui, server)

我尝试将自定义css添加到#btn、#btn-class- still，以及在探索检查工具时发现的其他一些类，但仍然没有完全正确。

感谢任何人的帮助！

Answer 1

向所有orderInput添加width = "100%"

orderInput('row_source', 'Row', class = "btn-group-vertical", 
                     items = c("B", "C", "D"), connect = 'row_dest', 
                     width = "100%")

无关，但不要使用两次相同的id (row_container)。