Encountering an issue with the resizable class in jQuery UI (http://jqueryui.com/resizable/). When resizing begins, all divs below move to overlap with the resizing div. Upon inspecting the js console in chrome, it appears that resizable applies inline styles such as "position: absolute; top: 24px; left: 593.90625px; height: 218px; width: 161px;", causing the overlapping. Removing these inline styles stops the overlap but also prevents the div from being resized.
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
});
View the fiddle here.