How to make popup modal scrollable on smaller screens

HTML & CSS
1

I have a popup modal that is 800 pixels in height. When I view on mobile I can’t scroll to the bottom. Not sure which css rules are preventing?

here is a link. it’s the “Find A Salon” button at the top right that launches the modal.

Any ideas?

2

Hi,

When the modal is open you are hiding the overflow on the body so that means that any element that is taller than the viewport will have its overflow cut off and you cannot scroll to it.

The idea of the modal is that you keep it within the viewport but you have sized it to be 800px high which means that on any screen that is less than 890px tall (800px height + top offset etc) then you will not be able to scroll to see that element as the body is cut off.

If you want an 800px height on taller screens then you will need a media query to remove that height on smaller screens and to allow it to scroll.

e.g.

@media screen and (max-height:890px){
 .FindASalonMenu{
   height:auto;
   bottom:0;
  overflow:auto;
 }
}
3

Once again… Paul to the rescue. Thanks again I really appreciate the explanation as well.

2 Likes
4

Just notice another issue with the modal.The button tom open the modal is in a sticky nav at the top of the page. If the user has scrolled down near the bottom of the page and click the modal If you are scrolled down towards the bottom of the page and click the button since it’s positioned absolute under the Navbar you can’t see it… or scroll or anything. How can I make it relative to the screen in view and positioned at the top right of the current view? So that’s it pops open at the top right of the current viewpoint rather than the top right of the page? here is a link to the dev

5

Your modal should be position:fixed and not absolute otherwise it scrolls with the document. :slight_smile:

.FindASalonMenu{position:fixed;}

6

Paul I’ve got the same issue with not being able to scroll down the menu on smaller screens , but with the flyout nav on the left side.

Here is what I have for that…

#navSidebar {
    overflow: auto;
    height: auto;
    position: fixed;
    left: 0px;
    transition: 0.5s;
    width: 0px;
    padding: 0;
    padding-bottom: 20px;
}

will this be much different because it’s not a modal?

7

For the element to scroll there must be a constraint on the height.

I would set a max-height of 100vh minus the 60px top position. You can use calc to do that. :slight_smile: i.e. calc(100vh - 60px)

8

Thanks again… Is there a badge for helping the same user 100+ times :slight_smile: How do I send you some coffee/beer money for all your help?

2 Likes
9

Ha ha no need. Glad to help :slight_smile:

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.