Distorted Spacing Between Div Elements After Sorting with Jqui_Sortable

Distorted spacing between div elements after sorting with jqui_sortable

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)

Rearange list of shiny wellpanels in R with uiOutput (shinyjqui)

I have got an answer after experiments. If somebody is interested.

 for (i in 1:length(uiList)) {
    uiList[i] <- uiList[i]$children
  }

It changes structure of list, put it before jqui_sortable call.

Related Topics