How to Activate A Vertical Scroll For Popup Content
Sometimes content inside a popup extends beyond the height of a popup container. Important content or functionality, like form input fields and buttons are cut off below the bottom of the device screen.
In this situation, site visitors need to vertically scroll the content to see everything inside the popup container.
Set Up Vertical Scroll From the Popup Admin
From the WordPress Admin, go to ‘All Popups’ and select the popup you want to edit for vertical scroll.
Inside the Popup Admin, scroll down below the content editor to ‘Display Settings’ >> ‘Size’.
By default, the popup container size is set to ‘Medium - 60%’. Move your cursor onto the ‘up/down’ arrows located to the right of the ‘Size’ option, and click. All the ‘Display Setting Size’ options will be visible in a single menu.
Select the ‘Custom’ option, a non-responsive size. Four hidden options will now become visible:
- Width ( units: pixels (px), percent (%), em, rem );
- Auto Adjusted Height ( true (checked) / false (unchecked) );
- Scrollable Content ( ( true (checked) / false (unchecked) ); and
- Height ( units: pixels (px), percent (%), em, rem ).
Enable a vertical scroll bar by selecting the ‘Scrollable Content’ checkbox.
To make the popup responsive by device screen-size, change the ‘Width’ and ‘Height’ parameters to ‘%’ (percent) units. We recommend starting with a value of 85% for each parameter. Adjust accordingly to suit your needs.
To save your changes, select ‘Update’ at the bottom of the ‘Publish’ metabox (located to the right of the content editor).