Create Bootstrap modal with jQuery resizeability

Question

So, I have a Bootstrap mod that I created, and I'm trying to change it using jquery. My size changes horizontally, but if you try to resize it vertically, then the content inside the modality is not contained in the element I'm trying to resize.

I tried using the 'alsoResize' property in .resizable() and included all the divs in the modal, but this seems to cause other problems.

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

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

Answer 1

You actually did everything right! But the default behavior of HTML elements overflow is visible . Therefore, if the contents of the parent element overflow, they exit the modal and do not look good! So, you need to set the CSS overflow property to scroll or hidden to fix the gap at a small size. Try adding:

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

This will provide scrolling when the element overflows.

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

Answer 2

It works (css)

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