CODEWITHSUNDEEP
htmlcss
ABCD
ABCD

Reputation: 43

How to not make CSS modal get cut off in page?

I have a modal implemented in CSS and it is getting cut off at the bottom of the page: enter image description here

I've tried the following style attributes:

style = "max-height: 100%; overflow-y: scroll; margin: auto"

But I am unable to make the modal fit in the page, on mobile or desktop. How can I fix this?

Update: Tried:

style = "max-height: 95vh; max-width: 95vw; overflow-y: auto;"

This gave some room at the bottom, but I still want the modal to fit in the page: enter image description here

Edit 2: I've updated my modal to:

class="modal" style="overflow-y: auto; max-height: 100vh; padding: 30px 0px 50px 0px; box-sizing: border-box; height: 90vh; z-index: 1000"

and my modal content to:

class="modal-content" style="height: 80vh; max-height: 600px; position: relative; display: flex; flex-direction: column; width: 95vw; max-width: 600px; border-radius: 4px; overflow: auto; box-sizing: border-box"

This seems to solve the problem I was having that caused the bottom button to get cut off; however, now, the header doesn't look right. It is pushed down. What can I do to fix this?:

enter image description here

Upvotes: 0

Views: 2206

Answers (1)

connexo
connexo

Reputation: 56744

CSS has the unit vh (viewport height) for this.

max-height: 95vh; /* 95% of the viewport's height */

This works on any device, mobile or desktop, with a supporting browser. Even Internet Explorer 9 supports it.

Regarding the overflow, I recommend you overflow-y as auto, not scroll. The difference is that scroll will always result in a scrollbar, even if not needed.

Remember to also limit the width of the modal. Long playlist names might, especially on mobile devices, lead to unwanted layout results otherwise.

For width, the corresponding unit is vw (viewport width).

Upvotes: 1

Related Questions