I designed a 3 column colums in a modal.
Everything runs fine but on mobile the columns are displayed one above the other and the lenght overflows the screen hight.
Is there a way to make the modal content scrollable?
hey Marius and others. I’ve tried this but my modal still won’t scroll. I’ve got a landing page with a section of 100vh, but I want the modal that you can open from there to have content that you can scroll down to.
it actually worked now! I checked and uncheck the auto overflow again
Hello,
I am also trying to get a menu Modal to scroll. If I set the height of the Modal to 100% then my Query of columns overlap each other. Then if I set the height of the Modal to pixels giving all the content enough space, on the frontend the Modal is not scrollable and the content is cut off at the bottom. I have set the Modal’s overflow to auto as well but still the Modal is not scrollable. Is there a setting I am missing?
Could you try to remove the max-height property from your global class?
Regarding the overflow rule, it seems that instead of overflow, overflow-x gets applied.
Could you try to switch to another value, update the page, and re-apply the overflow:auto rule? Alternatively, you can apply the scroll-y value from the dropdown, which should give you the same result.
Removing overflow:hidden from your query should fix your squeezed items.
Is there any reason you applied that specific rule?
There might be a bug in terms of applying the correct overflow rule on front-end under certain circumstances, as @boris reported something similar above.
But that’s just a guess, didn’t test anything here.
1 Like
Thanks a mill I will look into it. I have tried hard coding a overflow-y: auto. I was able to get the scroll working by wrapping everything in a div and applying overflow:auto.
To clarify for others;
Set the Modal height to 100%
Add a Div inside the Modal with your content inside and set the Div height by pixels/rem
There is no additional div needed.
Please also check this topic.
Not sure what’s wrong with your setup, you might reach out to support, so they can check if there is an issue, since a couple of people already reported something odd in that regard.
1 Like
Apologies I missed this. I had to add a div to get the scrolling feature to work. There maybe a wee bug. When I have a moment I will submit a bug report.
@Marius I am still having issues with getting this Modal the scroll at my tablet and mobile breakpoint. I have the module height set as auto; and I have tried setting it to 100%; as well. The overflow is set to auto. Identical settings within the wrapper div I created. I have a query in the modal. I don’t know if that makes a difference. I am able to scroll the modal at the tablet & mobile breakpoints within the editor but not on the frontend. Have you been able to get this to work?
No issues with the modal block on my end @hopscotch.
However, there are too many variables to exclude potential issues.
Could you provide a link? I’m glad to take a quick look.
It seems that you set the overflow rule only to the smallest breakpoint (576px).
I recommend setting it as a default rule.
You also need to give the modal block a fixed height - i.e. 100%.
Hi @Marius aye I tried just about everything with height and overflow. It is something to do with the query. Something that may not be possible. Thank your for having a look though 
Seems to be 2 independent instances, so not sure how this could be connected @hopscotch.
I’ve seen that you applied several (mostly identical) rules through all of your breakpoints. Maybe that’s worth digging first.
I was able to make it work properly by tweaking the rules on frontend.
Anyway, I’d appreciate if you update here in case you get it resolved and share what the issue was.
I ended up just removing the query simplifying the menu which actually flowed better. I need spare time to try to build that out again and see if I can find a solution.