jQuery UI resizable overlap issue

Question

I am getting an issue with the resizable class in jQuery UI (http://jqueryui.com/resizable/) When the resizing start, all of the below div move to overlap with the div getting resized. Using the js console in chrome, I've noticed that resizable put something in cssText. (position: absolute; top: 24px; left: 593.90625px; height: 218px; width: 161px;) By removing it, overlapping stop, but the div is not resized anymore.

HTML :

<div id="widget1" class="widget taille-2-2 drag">
    Val : <span id="span1">10</span>
</div>
<div id="widget2" class="widget taille-1-1 drag">
    Val : <span id="span2">20</span>
</div>
<div id="widget3" class="widget taille-2-1 drag">
    Val : <span id="span3">30</span>
</div>

CSS :

.widget {
    padding: 2px;
    border: 2px solid #ccc;
    float: left;
    overflow: hidden;
}

.taille-1-1 {
    width: 47px;
    height: 47px;
}

.taille-2-1 {
    width: 104px; /* taille*2+padding*2+border*2+tile.margin*2 */
    height: 47px;
}

.taille-2-2 {
    width: 104px;
    height: 104px;
}

.drag {
    position: relative;
    margin: 3px;
}

Javascript :

$(".drag").draggable(
{
     helper: "clone"
});
$(".widget").resizable(
{
    grid: [57,57],
    maxHeight: 332,
    maxWidth: 218
});

here is the fiddle.

I've added the fiddle. Also had to add some javascript to recreate the bug. — Richard
Found a solution : set addClasses: false in draggable. Can't answer myself tough. — Richard

Richard Richard · Accepted Answer · 2014-06-27T07:36:10

I've found a way to solve the problem, tough I don't understand why it is working :

Javascript :

$(".drag").draggable(
{
     helper: "clone",
     addClasses: false
});
$(".widget").resizable(
{
    grid: [57,57],
    maxHeight: 332,
    maxWidth: 218
});

jQuery UI resizable overlap issue

1 Answers