css - 使用 jqui_sortable 排序后 div 元素之间的间距失真

Question

虽然在我闪亮的应用程序中构建了一个非常好的附加功能，用户可以在其中重新组织页面内的图，但我遇到了 1 个问题。

我注意到正在重新定位（排序）的 div 元素之间的间距在这样做时会发生变化，从而导致之后的图错位。我试图将margin值调整为无，0 或一定数量的像素，但这似乎并不能解决这个问题。

我为测试/说明问题而制作的应用程序发布在下面，我省略了图表以简化它：

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)

这张图片显示了排序后的问题：

第二个问题是悬停绘图时出现的空白。

我试图从这个“非 R-Shiny”问题中添加 css，但无法使其工作。

标签： cssrlayoutshinyjqui

Answer 1

它还不是完美的，但它应该比以前更好。

s的间距问题<div>是由空文本节点引起的。在浏览器中检查页面时可以看到它们。这意味着，更改 css 边距参数将无济于事。空白文本节点出现在初始页面中，一旦您开始拖动它们就会消失，从而导致所述间距问题。uiOutput('multiobject')我通过不包裹在-tag 中来摆脱它们，而是使用indiv()定义它的宽度。.ui-sortable classcss

您的第二个问题，即悬停绘图时出现的空白，可以通过添加'float: left;到您的 plot_output_liststyle =中的参数来缓解。for loop of您链接的 SO 帖子中的 css 参数将不起作用，因为没有命名类.sort-container， .item-wrapper这是特定于原始问题的。拖动的时候还是会出现一个空白，但是比之前小了很多。

更新我的代码有一些问题，有时它工作有时不工作。我认为可能存在css冲突。我现在添加!important到更改后的 css 参数，它似乎工作。稍后将在另一台机器上尝试。

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)