JQuery UI Resizable - Multiple DIVs Resizing Pushing Other DIVs Around

Question

I played with a page that has a div containing several other divs and jQuery UI resizable. This is basically a panel with separate widgets. I need to be able to resize each individual "widget" div independently of every other div inside the containing div.

Currently, if I resize a div, it repels other divs. I need to resize the div and not affect the other divs (even if the div is resized or behind other divs). After trying a few different things, I had problems with its implementation.

I created a jsFiddle ( http://jsfiddle.net/gattml/Th75t/ ) that shows the layout of what I have for today.

Here are some snippets:

<div class="carousel-inner"> <div class="item"> <div class="widgetList"> <div class="widgetRefresh"> <div class="widgetResizable"> <div class="widget-header"> <span>header1</span> </div> <div class="widget-body"> <span>body1</span> </div> </div> </div> </div> ...other "widget" divs here... </div> </div> .carousel-inner { position: relative; width: 100%; overflow: hidden; outline: 1px solid red; } .item { left: 0; display: block; position: relative; outline: 1px solid blue; } .widgetList { background-color: #f5f5f5; display: inline-block; margin: 1em; position: relative; vertical-align: top; min-width: 80px; outline: 1px solid green; } .widgetResizable { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; min-width: 80px; overflow: hidden; outline: 1px dashed red; } .widget-header { outline: 1px dashed blue; } .widget-body { overflow: hidden; width: auto; height: 100px; padding: 4px; outline: 1px dashed green; } var $widget = $(".widgetList"); var $widgetResizable = $widget.find(".widgetResizable"); $widgetResizable.css("height", "170px"); $widget.draggable({ cursor: "move", grid: [4, 4], handle: ".widget-header", opacity: 0.85, zIndex: 100 }); $widgetResizable.resizable({ grid: [4, 4], handles: "e, s, se", minHeight: 100, minWidth: 80 }); 

So, how can I implement my mutable “widgets” divs so that they don't push other “widgets” divs?

Thanks!

Answer 1

Your box in motion should be absolute. You can add the class that I recommend at the beginning: function () {} or add css properties. You will also need to add a z-index value so that your box sits on top of the rest.

http://jsfiddle.net/Th75t/7/

 start:function(event,ui){ ui.element.css('position','absolute'); } 

BEST

 start:function(event,ui){ ui.element.addClass('active'); }