Topic: Using modal-full-height breaks scroll
If you have created a modal using:
<div class="modal fade right" id="modal_id" tabindex="-1" role="dialog" aria-labelledby="modal_id" aria-hidden="true">
<div class="modal-dialog modal-lg modal-full-height modal-right modal-info" role="document">
And then add long content, the scrolling does not work and the modal is locked to the screen height.
I fixed it by adding:
.modal-full-height {
height:auto !important;
}
to my site.css file, which allows content to scroll, but the modal then loads to whatever height the content is and not full screen height.
How do we fix this so we can have full height modal with scrolling?
My modal loads tabs, so the content on each tab is different heights and results in the modal changing heights for every tab.
I am loading content via ajax request and using the following from the docs does not help:
$('#modal_id').data('bs.modal').handleUpdate();
Thanks for your help.
Cheers
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Piotr Glejzer staff commented 6 years ago
But your fix is working very well. I also added this fix to our 'bugs list' to implement it to our modals as fast we can. I checked and I have full right modal with long content and I can scroll it properly. So maybe you may add a new class and add that fix to this class?ionyx pro commented 6 years ago
Hi Piotr Yes, it fixes it when you do have long content, but if you only have content that is half the page, the modal is not full height and will only be height of half the page. I would like it to be always full screen height, even if content is less than full screen. If you could let me know how this is possible please? Thank you.Piotr Glejzer staff commented 6 years ago
I see the problem here. If you want have a long content with good scroll you have to use height: auto but if you want have full height modal with hafl content you have to use height: 100%.. It's weird we are gonna fix this as soon as possible!ionyx pro commented 6 years ago
that would be awesome if you can please! thanks so much!ionyx pro commented 6 years ago
that would be awesome if you can please! thanks so much!Piotr Glejzer staff commented 6 years ago
Hi, Can you check this code?@media (min-width: 992px) { .modal .modal-full-height { min-height: 100%; height: auto !important; } .modal .modal-full-height.modal-bottom { min-height: 0; top: auto; } }Best, Piotrionyx pro commented 6 years ago
Excellent!! That is working great now. This allows scroll on long content and keeps 100% height when the content is shorter than page length - ideal for showing diff content in tabs. Thanks :)