Hi,
The number 1 red box (in the image below) is an ext.vertical scrolling-1 row, 1 column-repeater group, and it makes my page scrollable.
However, for red box number 2,3,4,5 (in the image below) they are fixed repeater groups, and I don’t want them to be scrollable. Right now, as I scroll the repeater group red box number 1, all of them will be scrolled and dissapear below. I don’t want these boxes 2,3,4,5 to be scrolled. I want them to be fixed in the current positions in the image below. How do I do this? I struggle a lot with this and would appreciate a lot if you can help me. Thank you!
CSS magic. You can’t achieve that with Bubble vanilla alone.
Main page needs to allow scrolling but keeping it at 100% the height of the viewport:
page {
height: 100vh !important;
overflow: scroll;
}
Sidebar elements 2,3 need to be a group, same as 4 and 5. Not sure if you want your topbar to scroll, but the css you add to elements you want to stick is:
#left-sidebar{
position:absolute;
top:0;
left:0;
height:100%;
}
#right-sidebar{
position:absolute;
top:0;
right:0;
height:100%;
}
However, keep in mind what you’ll do if the viewport width becomes too narrow for these sidebars to remain on the page. You can show / hide / change their html id via conditionals.
Edit: have not tried this with the new Engine. Perhaps there’s something there that might help you.
Hi, thank you so much for helping me!
I tried your solution but it didn’t work…
I added ID attribute to the top bar, left bar (i group them into 1 group as you said), right bar, and the page. I then added your CSS code into an HTML element and add this element to the page like below:
But it didn’t work… Could you help me determine what’s the problem here or what I did wrong? Thank you so much!
Solution, just put everything each in a Floating Group/Header. Problem solved! But thank you to @alejandrowunderlich for helping me!
That’s a brilliant solution! Very happy that it worked out!
