Topic: Full height modal: Modal does not properly resize vertically

allantra pro asked 6 years ago


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


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

allantra 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, Damian

allantra pro commented 6 years ago

That works, thank you.


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 Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags