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 & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Simon Balatero Lopez
Simon Balatero Lopez
3 years ago

Thank you!!

David C Work Sr
2 years ago

Perfect. Thank you

Alex
Alex
2 years ago

How do you style the scrollbar pls.

Will
Will
2 years ago

You're the best! Thank you. 🙂

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram