How to show/hide a scrollbar in your POWr Plugin

Add scrollbar to your Plugin

Some of our Plugins have dynamic content and therefore do not have a fixed height. For example, Comments will keep getting longer the more comments you receive! 

If your website doesn't resize automatically or you simply do not want your POWR Plugin to take up too much space, you can make your Plugin scrollable. 

There are two ways to add a scrollbar to your Plugin:

#1: Add custom CSS to your Plugin (Pro and Business users only)

You can add custom CSS directly to a Plugin by opening the POWR Editor and going to Design > Advanced > Custom CSS. In there, add a line of code that looks something like this:

#appView {height: 500px; overflow-y: scroll;}

Important: whichever value you add after height: will be the height of your Plugin on your page. In our example, the height of the Plugin is now 500px.

#2: Add custom CSS to your website

If you are not a POWR Pro or Business user, or you have a few POWR Plugins on your site for which you'd like to use the same height with scroll, you can add custom CSS directly to your website.

Where on your site you do this depends on how you edit your website. If you use a website builder without access the source code, you will want to add style tags to your website head and add the following code between two style tags:

.powrLoaded {height: 500px; overflow-y: scroll;}

If you have access to the full source code, your main stylesheet will be the best location for the code. 

For both options, the result will look something like this:

Hide scrollbar in a Plugin

Some of our Plugins add a scrollbar to the content area to keep the Plugin mobile-responsive. This is the case in our Popup, for example. To hide the scrollbar, you will want to find the class that wraps the frame in which you see the scrollbar. Go to Design > Advanced > Custom CSS and add your selector and the overflow: hidden to the CSS. 

In Popup, that would look like this:

.content {overflow-y: hidden !important;}