Topic: Full height modal: Modal does not properly resize vertically
We have an MDB modal that is positioned full-height on the right. The modal contains a component that allows file uploading, and lists files that get uploaded. When it lists these files, it adds height to the container of the modal-body obviously. However, I've noticed that the modal-content does not resize and as such part of the body content for the modal as well as the modal footer have no background color.
I would love to include an attachment to show you but for some reason we can't add attachments to these discussions, but you should be able to reproduce this by adding a bunch of content to your modal that makes it taller than the page.
The only thing I've found that fixes this issue is adding:
height: fit-content;
to the div with .modal-content in the modal. But this doesn't work when the modal content is smaller than the window size....
Thanks
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No
Damian Gemza staff commented 6 years ago
Dear Allantra, Could you please do some screenshots and upload it to some image uploading site, for example, imgur.com, and paste here links? It would me help to debug your problem. Also please provide a reproduction code on which I'll be able to check this case. Best Regards, Damianallantra pro commented 6 years ago
Hey Damian, I've used the modals page of mdbootstrap.com as an example. I copied the ul element inside modal body and pasted a couple times to illustrate, and so that this is super easy to reproduce. Here is Imgur url: https://imgur.com/a/dTsAfoF Thanks!Damian Gemza staff commented 6 years ago
Dear allantra, Thanks for your screens. Now I see the problem. As for a workaround, please use this styles in your global styles.scss stylesheet: .modal-full-height { height: unset !important; } We'll try to fix this problem with next update of MDB Angular (after 2 weeks). Best Regards, Damianallantra pro commented 6 years ago
That works, thank you.