When I apply the resizable in the panel and drag down, the footer does not come with the panel.
Any way to solve this problem?
The code is as follows:
<div class="panel panel-default" id="resizable">
<div class="panel-body">A Basic Panel</div>
<div class="panel-footer">Panel Footer</div>
</div>
<script>
$( "#resizable" ).resizable({
handles: "s"
});
</script>
Example: jsfiddle
What I did was add its class panel a min-height , so that there was a decrease that would cause the objects to collide, and a overflow: hidden so that what was inside the panels would not overflow.
.panel{
min-height: 100px;
overflow: hidden;
}
In the% w / w%, what made the difference was footer and position: absolute , thus it will be fixed, regardless of the size of the bottom: 0 .
.panel-footer{
position: absolute;
bottom: 0;
width: 100%;
}
Note: I used the same% w_th of the question, so that the user can resize only vertically and at the bottom. If you do not want this, you want a total resize, just remove .panel and add handles: "s" and handles to min-height/width according to what you want, so that, @ Highlander said, the user do not play around with the layout.