Question:
When I apply the resizable to the panel and drag it down, the footer doesn't 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
Answer:
What I did was add a min-height to your class panel , so that there wouldn't be a shrink that would make the objects collide, and an overflow: hidden so that what was inside the panels wouldn't overflow.
.panel{
min-height: 100px;
overflow: hidden;
}
In the footer what made the difference was the position: absolute and the bottom: 0 , this way it will be fixed, regardless of the size of the .panel .
.panel-footer{
position: absolute;
bottom: 0;
width: 100%;
}
Note: I used the same handles: "s" the question, so the user can only resize it vertically and at the bottom. If you don't want that, you want a full resize, just remove the handles and add a min-height/width and a max-height/width to the .panel according to what you want, so that, as @Highlander said, the user don't play around with the layout.