Change the boxes direction of dragulaInput

Question

I did ask this question yesterday, Change size, color of badge and text of dragulaInput, but now how I change the boxes vertically, right side and left side.

I saw <div style="display: grid; grid-column-gap: 5px; grid-row-gap: 5px; grid-template-columns: repeat(1, 1fr);", and try to overwrite it with, but it doesn't work.

Any help?

display: grid;
  grid-template-columns: repeat(2, 1fr);

if (interactive()) {
  
  library("shiny")
  library("esquisse")
  
  
  ui <- fluidPage(
    tags$h2("Demo dragulaInput"),
    tags$br(),
    dragulaInput(
      inputId = "dad",
      sourceLabel = "Old",
      targetsLabels = c("New"),
      choices = levels(iris[,"Species"]),
      width = "250px",
      height = "100px",
      status = "danger"
    ),
    verbatimTextOutput(outputId = "result")
  )
  
  
  server <- function(input, output, session) {
    
    output$result <- renderPrint({
      new_level <- input$dad$target$New
      new_level_1 <- c(new_level,input$dad$source)
       })
    
  }
  
  shinyApp(ui = ui, server = server)
  
}

Do you mean where the badges are inside the box? Or where the boxes are relative to each other? What is the desired output? — DaveArmstrong, Sep 04 '20 at 17:49

score 1 · Accepted Answer · answered Sep 04 '20 at 18:49

So, a few CSS elements have to be changed for this to work. The "Old" box is in a div with class container-drag-source and the "New" box is in a div with class shiny-split-layout. These different divs did not start out with all of the same properties, which is why I had to change more in one than another. Further, the actual box size for the "New" box is governed by an un-named, un-classed div which is a descendant of the shiny-split-layout div. That was hard coded to be 90% height. The interior of the "New" box into which you could move the badges is a div of class box-dad, with default padding of only 5px, which I had to change to 10px to match the white space around the edges in the "Old" box. The main thing that had to change was to set each div's display property to inline-block, which sets them side-by-side. The other stuff just makes them appear the same size.

  library("shiny")
  library("esquisse")
  
  
  ui <- fluidPage(
    tags$h2("Demo dragulaInput"),
    tags$br(),
    tags$style("
      div.container-drag-source{
        display: inline-block;
        width: 250px;
        height: 100%;
        vertical-align: top; 
      }
      div.shiny-split-layout{
        display: inline-block;
        width: 250px; 
        height: 100% !important;
        vertical-align: top; 
        padding: 0px 0 0px 0; 
        margin: 5px 0 0 0; 
        border-width: 1px;
      }
      div.shiny-split-layout div{
        height: 100% !important;
      }
      .box-dad{
      padding: 10px 5px 10px 5px;
      }
    "),
    dragulaInput(
      inputId = "dad",
      sourceLabel = "Old",
      targetsLabels = c("New"),
      choices = levels(iris[,"Species"]),
      width = "600px",
      height = "100px",
      status = "danger"
    ),
    verbatimTextOutput(outputId = "result")
  )
  
  
  server <- function(input, output, session) {
    
    output$result <- renderPrint({
      new_level <- input$dad$target$New
      new_level_1 <- c(new_level,input$dad$source)
    })
    
  }
  
  shinyApp(ui = ui, server = server)

It's weird, I don't get exactly like your, I got the same with the old one — Ben, Sep 05 '20 at 05:24
@Ben That is strange. I tried it on another computer and it worked produced the desired result. If you right-click in one of the boxes wen the shiny app is running and click "Inspect element", you should see whether it looks like any of the CSS that got defined in the style tag is active. — DaveArmstrong, Sep 05 '20 at 13:26
I tried 2 computers too, one is Mac and one is Linux, it still not working, maybe package version. I went to the function codes in Github, I found there are 2 more parameters, 1 is ncolGrid, and one is ncolSource, I added 2 parameters to the codes, it works. The weird thing is why I don’t see those parameters in the function. — Ben, Sep 05 '20 at 15:22

Change the boxes direction of dragulaInput

1 Answers1