Alter the drag direction of the dragulaInput boxes

Yesterday, I had a question about changing the size and color of the badge and text in dragulaInput. Now, I'm wondering how to change the boxes vertically on the right side and left side.

I came across

<div style="display: grid; grid-column-gap: 5px; grid-row-gap: 5px; grid-template-columns: repeat(1, 1fr);"
, and tried to overwrite it, but it didn't yield the desired results.

Can anyone offer assistance?

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

https://i.sstatic.net/zamIq.png

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)
  
}

Answer №1

To make this functionality work, several CSS elements need to be modified. The "Old" box resides in a container with the class container-drag-source, while the "New" box is housed in a div with the class shiny-split-layout. Initially, these divs did not share all the same properties, prompting adjustments in one over the other. Moreover, the size of the "New" box is determined by an unnamed descendant div within the shiny-split-layout div, set to a hardcoded 90% height. Within the "New" box, where badges can be moved, exists a div with the class box-dad, initially padded at 5px which I altered to match the white space around the edges in the "Old" box. The key modification required setting each div's display property to inline-block to position them side by side; the remaining adjustments were for visual uniformity.

  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)

https://i.sstatic.net/eUUvV.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue of checkboxes not being sorted properly in Slick Grid

Currently, I am working on resolving a sorting issue within one of our applications using Slick Grid for grid implementation. The existing sort function, although functional, presents a challenge. While it successfully sorts columns, the checkbox associate ...

"The server responded with a 405 error message indicating that the requested method

I have been working on a registration form project using HTML, JS, NodeJS, and SQLite. However, I am encountering an issue with the fetch function when trying to post the inputted information into the database. I keep receiving a POST 405 (Method Not Allo ...

Optimizing images for typography in SEO

Dealing with font rendering issues across different platforms can be quite challenging (for example, Windows often has unsightly anti-aliasing, and TTF fonts are not anti-aliased at all). This led me to consider generating a separate PNG file for each head ...

Aligning elements in the center vertically using absolute positioning for multiple elements

I have been experimenting with a method to vertically center an element in a div that has unknown height. You can check out the approach I used here: In my case, I am working with anchor tags and this solution was particularly helpful due to the position ...

What is the best way to add a checkbox tag in Rails using JavaScript?

I am attempting to use javascript to append the values from option fields to checkboxes in Rails. Here is a snippet of my javascript code: $("#regions option").each(function(){ $("#region-checkboxes").append('<li><%= check_box_tag "region ...

What could be causing my JavaScript pricing calculator to malfunction?

I've been struggling to make the script below work, but I can't seem to figure out why. It should be functioning properly. Even though all variables are in place, no price is appearing? You can view the HTML on this page: var cake_prices = n ...

Aligning items to the left and center using CSS flexbox

Is there a way to align the first element to the left and the second element to the center within a flex container? I've tried using different options like justify-content and align-items with center, but I can't seem to get the second element in ...

Creating personalized buttons for HTML dropdowns in PhoneGap

Is it possible to customize the buttons in an HTML select box (dropdown) with PhoneGap 3.5? I am looking to include a "Cancel" button along with the "Done" button. Are there any ways to modify or add select buttons through the PhoneGap API or plugins? ...

Pictures are automatically adjusted to a resolution of 0 x 0 within the Heroku application

I have encountered an issue with my simple webpage hosted on Heroku. Despite appearing perfectly fine on localhost, 4 images are automatically resized to 0x0 when viewed on Heroku. I am struggling to identify the cause of this problem. Here is how it appe ...

Theming for Atom and Electron developer tools

After switching from the netbeans IDE to github's atom, I realized that some necessary features were missing. Unable to find a suitable package, I decided to try customizing it myself, gaining valuable insight into the editor in the process. However, ...

Is there a way to only refresh the div specifically for the calendar with an id of "

$(document).ready(function() { $("#client-list").on("change", function() { var selectedValue = $(this).val(); location.reload(); }); }); Is there a way to refresh only the div with id='calendar' without refreshing the entire pa ...

How can I change the cursor of a button to a pointer in Bootstrap 4 when the button is not disabled?

I'm working with a bootstrap button <button class="btn btn-primary">Login</button> My goal is to change the cursor to a pointer (hand) on this button when it's not disabled, instead of the default arrow. The disabled property of th ...

Can the bottom border on an input textfield be removed specifically under the new character?

This is the new visual design I received: https://i.stack.imgur.com/kiQGe.png The label CLG is represented as a label, with the line being an input type=tel. Disregard the purple overlay... The designer has requested that I remove the border when a user ...

The iframe does not completely fill the col-sm column

https://i.sstatic.net/VeqFj.jpgHaving an issue styling embedded Grafana panels on my website. How can I adjust the iframes to fit within col-sm without large margins (refer to attached screenshot) This is my html: <p class= ...

Move a Div to be positioned directly underneath another DIV

There are two DIV elements, one with an absolute position in the lower left corner of the main DIV. The second DIV is hidden and only displayed when clicking on a link. I want the second one to appear just below the first one, but because the first div&ap ...

Parallel calculation in R using an MPI cluster setup on WestGrid's High Performance Computing system (pbs file)

Currently, I am working with a significantly large dataset and looking to expedite the process using parallel calculation. In this endeavor, I have turned to WestGrid, a Canadian computing system equipped with interconnect clusters. To execute parallel ta ...

Is Javascript the best choice for managing multiple instances of similar HTML code?

I am currently facing the challenge of dealing with a lengthy HTML page consisting of around 300 lines of code. The majority of the code involves repetitive forms, each identical except for the ID (which varies by number). Is it considered appropriate or ...

Using App Storage on Windows Phone 8 with HTML5

Exploring storage options for my html5 app compatible with both windows 8 and windows phone 8. Considering: Local Storage IndexDB Looking for advice on the best storage mechanism to use. Is IndexDB compatible with windows phone 8? Any insights on quota ...

The absence of button.onclick=func in the HTML code is notable

I am facing an issue where adding an onclick attribute to an input element via JavaScript does not display in the HTML, but the function gets executed. On the other hand, when I add the input element directly in the HTML code, the onclick attribute shows u ...

What is the method to process a JSON path containing a special character like "@"?

I'm attempting to retrieve JSON data from an API with the following structure. My current approach involves using JavaScript. The code snippet I have utilized is displayed below. <p>"stations": [</p> <p id="data"></p> ...