С помощью JQuery, как можно применить изменяемый размер div, чтобы форма соответствовала его дочерним элементам управления?

Question

На прилагаемом изображении есть информация о том, как мне хотелось бы, чтобы этот изменяемый размер div вел себя.

В принципе, я бы хотел, чтобы div мог устанавливать элементы управления по вертикали или по горизонтали.

Это говорит, скажем, я динамически генерироваться набор элементов управления в DIV, в данном случае:

<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> 

, но это может быть любое количество кнопок, текстовых полей, выпадающие и т.д.

Вот что у меня есть для JQuery до сих пор в JSFiddle

Если вы играете со скрипкой, вы увидите, что div не соответствует его детям при изменении размера по высоте.

Не работает, как бы я хотел, и надеялся на какую-то помощь/понимание. Спасибо.

Answer 1

Этот фрагмент пытается обнять высоту дочерних разделов в зависимости от того, какая конфигурация они отображаются, установлена ​​минимальная ширина, и есть функция для вычисления максимальной ширины (эта функция была закомментирована, хотя, поскольку с ней на ней эффективно блокирует изменчивость, что я не уверен, что вы хотите, но вы можете раскомментировать, чтобы видеть).

Обратите внимание, что скрытая кнопка не совпадает с тем, как имитировать новый контент, поскольку функция maxheight ищет высоту последнего дочернего-div, и если у этого есть display:none, тогда он предполагает, что нижняя часть последнего дочернего-div нуль. Таким образом, кнопка «display» была адаптирована для добавления новых кнопок.

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>