isotropic-2022
Share
Blog
Search
Menu

Oxygen Builder Modal Scroll

By James LePage
 on July 20, 2020
Last modified on January 7th, 2022

Oxygen Builder Modal Scroll

By James LePage
 on July 20, 2020
Last modified on January 7th, 2022

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
Subscribe
Notify of
guest
6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Simon Balatero Lopez
Simon Balatero Lopez
10 months ago

Thank you!!

David C Work Sr
8 months ago

Perfect. Thank you

Alex
Alex
8 months ago

How do you style the scrollbar pls.

Will
Will
7 months ago

You're the best! Thank you. 🙂

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
Close
🇺🇸 English
Save posts, access exclusive content, join members-only communities and more.
Dark Mode Toggle
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram