So I have a Bootstrap modal I've created and I am trying to make it resizable using jquery. I have the resize working horizontally but if you try to resize vertically its like the content inside of the modal is not contained within the element I am trying to resize.

I tried using the 'alsoResize' property on the .resizable() and included all the divs within the modal but that seems to cause other issues.

$('.modal-content').resizable({
    alsoResize: ".modal-header, .modal-body, .modal-footer"
});

Here is my example: /

So I have a Bootstrap modal I've created and I am trying to make it resizable using jquery. I have the resize working horizontally but if you try to resize vertically its like the content inside of the modal is not contained within the element I am trying to resize.

I tried using the 'alsoResize' property on the .resizable() and included all the divs within the modal but that seems to cause other issues.

$('.modal-content').resizable({
    alsoResize: ".modal-header, .modal-body, .modal-footer"
});

Here is my example: https://jsfiddle.net/p7o2mkg4/

• javascript
• jquery
• css
• twitter-bootstrap
• jquery-ui

3 Answers 3

You actually did everything right! But the default overflow behaviour of HTML elements is visible. So if the parent element's content gets overflowed, they break out of the modal and that doesn't look good! So, you need to set the CSS overflow property to scroll or hidden to fix breaking on small size. Try adding:

.modal-content.ui-resizable {
  overflow: scroll;
}

This will ensure scrolling on overflow of the element.

Link to JSFiddle: https://jsfiddle.net/p7o2mkg4/1/

This works (css)

#myModal>div{
overflow-y: hidden;
overflow-x: hidden;
}

In case anyone stumbles across this like I have, make sure you have both jQueryUI.js and jQueryUI.css.

I thought having only jQueryUI.js was enough, but it turns out adding the stylesheet is why it wasn't working for me.