jQuery resizable() does not drag panel-footer


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>

    $( "#resizable" ).resizable({
  handles: "s"

Example: jsfiddle


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.

  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 .

  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.


Scroll to Top