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.

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