Topic: Using modal-full-height breaks scroll

ionyx pro asked 6 years ago


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

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, Piotr

ionyx 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 :)


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags