Distorted spacing between div elements after sorting with jqui_sortable

Question

While building a very nice additional functionality into my shiny app where the user can reorganize the plots inside the page, I ran into 1 problem.

I noticed that the spacing between the div elements that are being relocated (sorted), changes while doing so, resulting in a misalignment of the plots afterwards. I have tried to adjust margin values to nothing, 0 or a certain amount of pixels, but that doesn't seem to solve this.

The app that I made to test / illustrate the issue is posted below, where I left out the plots to simplify it:

require('shiny')
require('shinyjqui')

ui <- fluidPage(
div(uiOutput('multiobject'), style = 'width: 1200px')
)

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

output$multiobject <- renderUI({
plot_output_list <- list();

for(i in 1:8) {
plot_output_list <- append(plot_output_list,list(
wellPanel(
actionButton('drag', label = icon('hand-point-up'), style = 'float: right; color: #339fff;'),
style = 'border-color:#339fff; border-width:1px; background-color: #fff;display: inline-block; margin:2px; width:290px; height:250px')
))
}
jqui_sortable(do.call(function(...) div(id="allplots", ...), plot_output_list), options = list(handle = '#drag', cancel = ""))

})
}

shinyApp(ui, server)

and this image shows the problem after sorting:

A second problem is the white space appearing when hovering a plot.

I tried to add the css from this "non-R-Shiny" question but could't make it work.

Answer 1

It is not perfect yet, but it should be better than before.

The spacing problem of the <div>s was caused by empty text knods. You can see them when inspecting the page in a browser. This means, changing the css margin arguments will not help. The empty text knods are present in the initial page and once you start dragging they disappear leading to said spacing problem. I got rid of them by not wrapping uiOutput('multiobject') in a div()-tag and instead defined its width using the .ui-sortable class in css.

Your second problem, the white space appearing when hovering a plot, can be mitigated by adding 'float: left; to the style = argument in the for loop of your plot_output_list. The css arguments from the SO post you linked won't work, since there are no classes named .sort-container and .item-wrapper this was specific to the original question. There is still a white space appearing when dragging, but it is much smaller than before.

Update I had some issues with the code, sometimes it's working sometimes not. I think there might be css confilcts. I now added !important to the changed css arguments and it seems to work. Will try it on a different machine later.

require('shiny')
require('shinyjqui')
require('stringr')


ui <- fluidPage(

    # Custom CSS----------
    tags$style(HTML(".ui-sortable {
                     width: 1200px !important;
                      } "
                     )),

    uiOutput('multiobject')

)

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

    output$multiobject <- renderUI({

        print(input$drag)

        plot_output_list <- list();

        for (i in 1:8) {
            plot_output_list <- append(plot_output_list,list(
                wellPanel(
                    actionButton('drag', label = icon('hand-point-up'), style = 'float: right; color: #339fff;'),
                    style = 'float:left !important; border-color:#339fff; border-width:1px; background-color: #fff;display: inline-block; margin:2px; width:290px; height:250px')
            ))
        }

        jqui_sortable(do.call(function(...) div(id = "allplots", ...), plot_output_list), options = list(handle = '#drag', cancel = ""))

    })

}

shinyApp(ui, server)