Making Bootstrap modal resizable with jQuery UI issue
Solution 1
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/
Solution 2
This works (css)
#myModal>div{
overflow-y: hidden;
overflow-x: hidden;
}
user3618473
I work with and lead a small team to develop and maintain business critical web applications and services. Working with a small to medium sized company has given me the opportunity to work with lots of technologies such as C# .NET, Node.js, JavaScript, jQuery, Vue.js, PHP, Python, WordPress, Drupal, Plone, SQL Server, MySQL, and many more. My work has included implementing a Single Sign-On (SSO) process within applications, writing stored procedures in a SQL database, developing a new microservice for several applications to use, or even creating dashboards and reports.
Updated on June 08, 2022Comments
-
user3618473 almost 2 years
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/