I am having a problem with horizontal alignment of 4 textareas and an iframe where I am using jQuery-UI resizable method. Each textarea and iframe appear vertically stacked even though I have use float:left in the panel .class to align things horizontally.
The second problem I noticed is each resizable element was declared with a width of 100px, but the width is altered to 93px it appears (from use of resizable?) when viewed with chrome development tools.
My jsfiddle contains 3 examples. (1) a group of Div Blocks that are resizable to the outer boundaries of the parent div. I would like to achieve this same functionality with textareas and iframe, b) a group of textareas that DO NOT use jQuery resizable. Added this to demonstrate that textareas are inline-blocks that are resizable BY DEFAULT without need to float:left these elements. c) My Problem demonstrated: 4 textareas and a single iframe that do not align horizontally and flow beyond the boundaries of the parent container. I would like to resolve the alignment problem and be able to test that textareas resizability operates in the same way as the DIV blocks staying within the width boundaries of the parent DIV.
Another issue is that using jQuery UI resizable is changing the width property from 100px to 93px. I hope this 2nd question doesn't violate any posting rules that I may not be aware of.
Thank you for your time.
my [jsfiddle][1][1]: https://jsfiddle.net/KerryRuddock/nbLhvg09/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Resizable</title>
<link rel="stylesheet" href="jqueryui/jquery-ui.css">
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="jqueryui/jquery-ui.js"></script>
<style>
* { padding:0; box-sizing: border-box; }
.h-mt50 { margin-top:50px; }
#div-wrap {
height:40px;
width:400px;
border:1px solid black;
font-size:0px;
}
#d1, #d2, #d3, #d4, #d5 {
height:40px;
width:40px;
display: inline-block;
}
#textarea-wrap {
height:100px;
width:100%;
border:1px solid black;
font-size:0px;
}
#t1, #t2, #t3, #t4, #t5 {
height: 100px;
width: 100px;
box-sizing: border-box;
float:left;
resize:horizontal;
}
#d1, #t1 { background: lime; }
#d2, #t2 { background: teal; }
#d3, #t3 { background: gold; }
#d4, #t4 { background: aqua; }
#d5, #t5 { background: pink; }
</style>
</head>
<body>
<h2 class="h-mt50">Resizable Div blocks</h2>
<div id="div-wrap">
<div id="d1" class="box"></div>
<div id="d2" class="box"></div>
<div id="d3" class="box"></div>
<div id="d4" class="box"></div>
<div id="d5" class="box"></div>
</div>
<h2 class="h-mt50">TextArea - no added jQuery UI </h2>
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>
<h2 class="h-mt50">Resizable TextArea blocks</h2>
<div id="textarea-wrap">
<textarea id="t1" class="panel"></textarea>
<textarea id="t2" class="panel"></textarea>
<textarea id="t3" class="panel"></textarea>
<textarea id="t4" class="panel"></textarea>
<!-- <iframe id="t5" class="panel"></iframe> -->
</div>
<script>
$( function() {
$(".box" ).resizable({
containment: "#div-wrap",
grid: 20,
maxWidth: 200,
minWidth: 40,
handles: "e",
resize: function(event ,ui){
var parent = ui.element.parent();
var siblingWidth = 0;
ui.element.siblings().each(function() {
siblingWidth += $(this).width();
});
if ( parent.width() <= siblingWidth + ui.element.width() ) {
ui.element.width( parent.width() - siblingWidth );
}
}
});
$(".panel" ).resizable({
containment: "#textarea-wrap",
grid: 20,
maxWidth: 200,
minWidth: 40,
handles: "e",
resize: function(event ,ui){
var currentWidth = ui.size.width;
// this accounts for some lag in the ui.size value, if you take this away
// you'll get some instable behaviour
$(this).width(currentWidth);
var parent = ui.element.parent();
var siblingWidth = 0;
ui.element.siblings().each(function() {
siblingWidth += $(this).width();
});
if ( parent.width() <= siblingWidth + ui.element.width() ) {
ui.element.width( parent.width() - siblingWidth );
}
}
});
});
</script>
</body>
</html>
Amazing what one can learn in 3 months. Fixed this issue myself and updated this fiddle
You can see I added .ui-wrapper
{ float: left };to the CSS