Stop right pane from scrolling at the end of its content

On a page, I have a wide left group and a slim right pane. The right pane has limited content. How do I get the right pane to stop scrolling once the bottom of its content is reached, like the Reddit home page?

Use a floating-group positioned to right/both (top & bottom) and snap it to the right of your screen.

@nomorecode, for some reason, the floating group becomes invisible when I switch the vertical relative float from top or bottom to both. Any idea why? By the way, when I snap it to the right, it becomes increasingly separated from the left group as the screen gets wider. How do I manage this?

You need to ensure that the floating group is snapped to both the very top and bottom of your page and fixed to float right and both. Then set a fixed width to the right floating group as this gives you more control when shrinking for mobile. I recommend no more than 320px. You can then allow the left group to naturally expand.

Thank you @nomorecode. Yes, snapping to the floating group to the very top and bottom of the page solved the visibility issue! :+1:

On managing the separation to the left group, I have the width of the floating group fixed at 300px and allow the left group to naturally expand but to a max of 600 px. As you can imagine, as the screen width expands to more than 920px, the gap between the floating group and the left group begins to widen as well. Is there a way around this?

What size is your entire page width?

The entire page width is 940

OK thanks, is there a reason why you have your left group set to a max of 600px?

Yes @nomorecode. The main group contains a repeating group of short texts. Beyond 600, the group just doesn’t look that good.

Would it be possible to send a screen of the RG below 600 and above 600+.

Sure @nomorecode. Just sent you a screen shot. Thanks for your help with this

Thanks Chris, I see what you mean. Because you are using a gray bg keeping the width at 600px does indeed make the UI more tangible.

Your only option is to find your breakpoints by using something like this for your calculations…

http://gridcalculator.dk/#/920/3/20/20

Thanks for sharing that @nomorecode. How do I use the breakpoints to keep the right floating group from becoming detached from the left group?

Your probably better using a 1200px layout split into 2 sections > left being 800px / right being 400px(this 400px group will act as a spacer) = 1200px. In responsive mode > click on the 400px and set to hide when the page <800px. Then float your right hand group over the 400px and add the following workflow > everytime > when page width > 800px show right floating group / when page width < 800px hide right floating group.

Ah @nomorecode, thank you. I see how that would work and will give it a go. Question - I see the content on the floating group scrolls only when the cursor is on it. Is there a way to get it to scroll normally along with the rest of the page?

You would simply change the floating group to a ‘normal’ group.

Thanks for your help @nomorecode. Agree - I’m going to go with ‘normal’ group for now. Hopefully a future update of Bubble will make it easy to scroll a floating group along with the rest of the page

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.