Forum Documentation Showcase Pricing Learn more

Scrollbar in floating group side menu



I just wanted to share a lot of help I got from @gf_wolfer

In need of clarity on the subject of a side menu with scroll, I turned to the forum and found a thread @gf_wolfer had commented on, but it was closed. I reached out to him in a PM and he readily replied with assistance. I want to pass this along as it has made my life so much easier now.

At first, I tried some other methods that included using javascript and another using CSS. I’ve heard from some that there could potentially be issues and I had experienced them as you needed to set them twice in a workflow and needed timing to work in your favor.

The method that was shared involves no workflows, custom states or conditionals. It is a simple straightforward approach that works. At first, I had some issues with it as I had failed to notice that there was setting on the page.

In order for this to work, you must have your page set to “not fixed width”. I struggled for a while before getting this part figured out.

  1. Set up Page - Set your page height ( 1800 for example ) and width ( 960 ). In reality the width and height don’t matter, however the height is important as we will set other elements on the page to the same height dimension.

  1. Add a Floating group. Set X and Y coordinates to 0. And set height to the same as your page ( 1800 for example )

  1. Set Floating Group to float relative to “both”

  1. Add a group element inside of the floating group element. Make sure to have the bottom of both elements touching. Easy way to do this is on a page with height of 1800 is to set a group inside the floating group with a height of 990 and a X , Y coordinate of 0 , 810

Make Sure the group is set to not visible on page load and collapse element height when hidden

You should then have a menu that is able t be scrolled while the page remains in place.

Check out the editor:

1 Like