Vertical scrolling in a floating group?

**eddy** · February 9, 2019, 2:26pm

How could someone create something like this in Bubble:

A floating group with a scroll view. For like example sidebar… So it will fit on all screens etc.

**Beau** · February 9, 2019, 5:21pm

**eddy** · February 9, 2019, 5:21pm

Thanks @Beau this is exactly what I needed

**eddy** · February 9, 2019, 6:00pm

Only for some reason when you put a ‘data source’ it won’t work…

**Beau** · February 9, 2019, 6:09pm

seems to work fine for me.

**eddy** · February 9, 2019, 6:19pm

Hmm it didn’t scroll anymore because there was a repeating group in the side bar too with horizontal scrolling text… Without it works

**Beau** · February 9, 2019, 6:21pm

try add
overflow-x: scroll;

**eddy** · February 9, 2019, 6:35pm

Same, doesn’t work Update: It works now!

**Beau** · February 9, 2019, 6:39pm

nice!

**eddy** · February 11, 2019, 10:12am

Could it be it doesn’t work with multiple groups in the floating group?

**eddy** · February 11, 2019, 11:25am

Found why it didn’t work.

There are groups within the #inner if they change (hide or show) the group freeze and the floating group isn’t scrollable anymore. When I can this action again it’s working again:

Do you think there is a better way? Then calling the action every time…

**Beau** · February 11, 2019, 11:39am

i havent really experimented with it much, i will test it out.

**Beau** · February 11, 2019, 1:36pm

Youre right, need to run csstools every time. It needs to be the first action in the event to work again after page is resized. I couldnt manage to style the scrollbar, color, width etc.

when I added the collapse group it wouldnt reach bottom of page when resized, so i put a separate float group set to both behind it.

editor: https://bubble.is/page?type=page&name=scroll2&id=niceapp&tab=tabs-1
preview: https://niceapp.bubbleapps.io/version-test/scroll2

**eddy** · February 11, 2019, 2:35pm

Nice! Only for me it doesn’t work… Probably because of the hide element when X conditions

**Beau** · February 11, 2019, 3:30pm

this works for me

what are you hiding and showing & what condition?

**Beau** · February 11, 2019, 3:37pm

i just tried setting states it didnt work unless i set a condition for when state was true/false to do the 100% resize thing.

Its a bit hacky but should be able to achieve what you want.

**eddy** · February 11, 2019, 4:18pm

Thanks will try it

**erick.mckesson** · February 11, 2019, 4:29pm

Thanks @Beau! Any thoughts on getting this to trigger when a page is resized? My FG is always visible (unless the width gets really small)…so not changing a state really, but if the page height shrinks after page load, the scrollbar won’t show. Trying to think of a good workflow trigger…

**erick.mckesson** · February 11, 2019, 4:32pm

Answered my own question there, didn’t I.

**system** · April 20, 2019, 2:35pm

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