How to show/hide a scrollbar in your POWR App

Add scrollbar to your App

Some of our Apps 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 App to take up too much space, you can make your App scrollable. 

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

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

You can add custom CSS directly to a App 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 App on your page. In our example, the height of the App 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 App 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 App

Some of our Apps add a scrollbar to the content area to keep the App 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;}