JSFiddle - React, Tailwind, and code Playground

by Bladetrick

HTML

<div id="block">
      <div id="divContent">  
          <button id="btnDisplayBTN">Display</button>
          <button id="btnGetHeight" click="btnGetHeight_Click()">Total Height</button>
          <input id="txb"></input>
          <button id="btnNewBTN">new button!</button>
      </div>
</div>

CSS

#block {border: 1px solid red; background-color: red; width: 300px; padding: 5px}
#btnDisplayBTN { width: 100px; }
#btnGetHeight { width: 100px; }
#btnNewBTN { display: none; width: 100px; }
 
#divContent { }
div { width: 100%; }

JavaScript

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 = (numberOfControls + padding) * controlheight;
        
        //--- Find minHeight
        minhi = controlheight;
});

block.draggable();
block.resizable({
	maxWidth: maxwid,
    minWidth: minwid,
    maxHeight: maxhi,
    minHeight: minhi,
    resize : function(e) {

        
        //block.height(content.height());
        //block.width(totalwidth);
        
        //content.width(totalwidth + 400);
        //alert(totalwidth);
    }
});

function getMaxWidth() {
    content.children().each(function(i, val){
        totalwidth = totalwidth + $( "#" + val.id ).width() + padding;          
    });
    return totalwidth;
}

function getMinWidth() {
    content.children().each(function(i, val){       
        arrwid.push($( "#" + val.id ).width()); 
    });			          
    minwid = Math.max.apply(Math, arrwid);
    return minwid;
}

function getMaxHeight() {
    $('#divContent').children().each(function(i, val){
        totalwidth = totalwidth + $( "#" + val.id ).width();
        arrwid.push($( "#" + val.id ).width()); 
    });
    return totalwidth;
}

function getMinHeight() {
	return controlheight;  //--- Height of a single control.
}

function recalculateDimensions() {
	numberOfControls = content.children().length;
	maxwid = getMaxWidth();
   ...