I've been experimenting with a webpage that consists of a div element containing multiple nested divs and jQuery UI resizable functionality. Essentially, it's a dashboard comprised of individual widgets. My goal is to resize each widget independently without affecting the positioning of other widgets inside the parent div.
Currently, resizing one div causes displacement of other adjacent divs. I want to be able to resize a single div without influencing others (even if the resized div overlaps or goes behind other divs). Despite trying various approaches, I'm encountering challenges in implementing this.
I've set up a jsFiddle (http://jsfiddle.net/gattml/Th75t/) to showcase my current progress.
Below are some code 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
});
How can I achieve resizable "widget" divs that maintain their positions without affecting other "widget" divs?
Appreciate any help!