Oxygen Builder Modal Scroll

Published: July 20, 2020

In this article we're going to take a look at a solution to a common problem in the Oxygen Builder. When adding a modal to your website (this is the native “pop up” component in Oxygen), There's no way to add a scroll to it. What this means is that if the content exceeds the height of the viewport, there's no way for the viewer to access all of it.

When should web designers use modal overlays? / Boing Boing
Example Of A Modal

The modal does not scroll in the Oxygen Builder. If you try to scroll up and down the page with the modal activated, the page behind the popup will scroll – the modal will not.

Luckily, there's a fairly simple solution for this issue.  

First, if the content does not exceed the height of the viewport, there's no need to do anything in this situation. However, if the content does exceed the height of the viewport, you'll want to make it scrollable within the modal so all of it can be accessed by the viewer.

To do this, set up a div, and give it a max height setting of 90vh. then, and either the custom CSS, or layout tab of that Div, set the overflow to scroll.

What this means is that the maximum height of your modal will remain at 90vh. If the content exceeds that height, it will be cut off with the option to scroll within the modal to view all of the content. This works around the issue of being unable to access all of the content if it is higher than the viewport height. Even better, it will work on the desktop, tablet, and mobile versions of your website.  

To take it a step further, you can hide the vertical scrollbar, or restyle it to be something more simple. However, if you're looking for a quick way to work around the Oxygen Builder modal scroll issue, this is it.

Overflow:scroll
Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Subscribe
Notify of
guest
6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Simon Balatero Lopez
Simon Balatero Lopez
6 months ago

Thank you!!

David C Work Sr
4 months ago

Perfect. Thank you

Alex
Alex
4 months ago

How do you style the scrollbar pls.

Will
Will
3 months ago

You're the best! Thank you. 🙂

IsoGroup- Web Dev/Design, WordPress and More

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.

Author

A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram