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
isogroup-cover
Join The IsoGroup
A vibrant Facebook Group to talk about web design and the business of agency. Daily curated resources and conversations.
oxygen-course-isotropic
Oxygen Builder Course - Coming Soon
The Oxygen Builder Mastery course will bring you from beginner to professional - ACF, MetaBox & WooCommerce modules included.
Get Launch Notification & Discount
bricks-builder-course
Bricks Builder Course - Coming Soon
The Bricks Builder Mastery course will bring you up to speed on this popular builder.
Get Launch Notification & Discount
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
1 year ago

Thank you!!

David C Work Sr
1 year ago

Perfect. Thank you

Alex
Alex
1 year ago

How do you style the scrollbar pls.

Will
Will
1 year 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.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram