Using JQuery, how can enforce a resizable div to form-fit its child controls?

Question

The attached image has some info on how I'd like this resizable div to behave.

Basically, I'd like the div to be able to set the controls vertically or horizontally.

That said, say I have dynamically generated set of controls in a div, in this case:

<style type="text/css">
    button { width: 100px; }
    input { width: 100px; }    
</style>
<div id="block">
    <div id="content">
        <button id="btn1">Button One</button>
        <button id="btn2">Button Two</button>
        <input id="txb1"></input>
        <button id="btn3">Button Three</button>
    </div>
</div>

but it can be any number of buttons, textboxes, comboboxes, etc.

Here's what I have for JQuery thus far in a JSFiddle

If you play with the fiddle, you'll see that the div doesn't conform to its children when resizing height-wise.

Its not working how i'd like it to and was hoping for some help/insight. Thank you.

Answer 1

This snippet attempts to hug the height of the child-divs in whichever config they appear, a minimum width is set, and there's a function to calculate the max width (this function has been commented out though because with it on it effectively locks the resizability -which I'm not sure you want, but you can uncomment to see).

Note that the hidden button isn't the same way as simulating new content as the maxheight function looks for the height of the last child-div and if this has display:none then it assumes the bottom of the last child-div is zero. So the 'display' button has been adapted to append new buttons.

 var block = $("#block"); var content = $("#divContent") var cons = content.children().length * 20; var numberOfControls = content.children().length; var controlheight = 20; var padding = 5; var totalwidth = 0; var totalheight = 0; var minwid = 0; var maxwid = 0; var minhi = 0; var maxhi = 0; var arrwid = []; block.ready(function(e) { //--- initialize values totalwidth = 0; //--- Find the sum of lengths of controls to set the maximum width maxwid = getMaxWidth() + padding; //--- Find the control with the longest length for minimum width minwid = getMinWidth() + padding; //--- Find number of controls to set the height maxhi = getMaxHeight(); //--- Find minHeight minhi = controlheight; }); block.draggable(); function res() { block.resizable({ maxWidth: maxwid, minWidth: minwid, maxHeight: maxhi, minHeight: minhi, resize: function(e) { block.height(getMaxHeight()); //block.width(totalwidth); //content.width(totalwidth + 400); //alert(totalwidth); } }); } $(window).load(function() { res(); // defined for later resetting }); function getMaxWidth() { content.children().each(function(i, val) { totalwidth = totalwidth + $("#" + val.id).width() + padding; }); return totalwidth; } /* function getMaxWidth() { var tempWidth = []; content.children().each(function(i, val){ tempWidth.push($(this).outerWidth()); }); totalwidth = Math.max.apply(null, tempWidth); return totalwidth; } // this function will get you the maximum current width, but combined with maxheight will effectively lock your resizer. */ function getMinWidth() { var arrwid1 = []; content.children().each(function(i, val) { arrwid1.push($(this).width()); }); minwid = Number(Math.max.apply(null, arrwid1)) + padding; $('#w').text('minwidth =' + minwid); return minwid; } function getMaxHeight() { var dcon = $('#divContent').children().last(), totalwidth = dcon.position().top + dcon.height(); $('#h').text('height =' + totalwidth); return totalwidth; } function getMinHeight() { return controlheight; //--- Height of a single control. } function recalculateDimensions() { numberOfControls = content.children().length; maxwid = getMaxWidth(); minwid = getMinWidth(); maxhi = getMaxHeight(); minhi = getMinHeight(); } $('#btnDisplayBTN').click(function() { $('#divContent').append('<button class="btnNewBTN">new button!</button>'); recalculateDimensions(); res(); }); $('#btnGetHeight').click(function btnGetHeight_Click() { alert((numberOfControls + padding) * controlheight); }); 

 #block { border: 1px solid red; background-color: red; width: 300px; padding: 5px } #btnDisplayBTN { width: 100px; } #btnGetHeight { width: 100px; } .btnNewBTN { width: 100px; } #divContent {} div { width: 100%; } #monitor { position: fixed; bottom: 2em; } 

 <link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> <div id="block"> <div id="divContent"> <button id="btnDisplayBTN">Display</button> <button id="btnGetHeight" click="btnGetHeight_Click()">Total Height</button> <input id="txb" /> </div> </div> <div id='monitor'> <div id='h'></div> <div id='w'></div> </div>