Forum Documentation Showcase Pricing Learn more

Side menu vertical scroll

Hi

I was following a thread on the topic before and implemented a copy of the shared editor. Everything is working fine on that but when I tried to implement this into another app I am having an issue. For some reason when the CSS change element over time causes all the other elements on the page to disappear.

I tried playing around with it and it seems to be the CSS tools that is causing the issue, because when I remove the event from the workflows, the other elements on page remain visible.

I created a custom event to run the CSStools.

After that I triggered the event on the click of a group and on page load.

After spotting the issue I began to play around with things and stopped running the custom event on page load and the other page elements loaded and remained visible.

So I continued to look into what could be the problem and ran the CSStools on page load again. It seems the other page elements are loading but then getting deleted from the page. I can see them getting “deleted” from the page because I have the floating group set to width 100% and it will expand to fit the width of the page after the other page elements are “deleted”.

I’m not sure if anybody who was part of the original thread @erick.mckesson , @eddy , @anon65040322 , have had any similar experiences with this set up.

This is the html I put onto the group that is getting “deleted”.

I have also tried putting the html element into different locations on the page and inside different groups but that doesn’t make a difference either.

Live Update

I just played around and found that the issue was in the setting of width being 100%…it seems that the width was trying to set to 100% of the page and therefore it bounced the other elements off.

I ended up just putting the width to a set px size equal to the floating groups size as an open menu

im not using that method anymore, i just use floating group set to both and make it the height of the page.

why did you steal my logo?

hahaha…the logo was something I had to paste to be sure I had everything working correctly…in the end I just didn’t bother to delete it

I am using this technique to get the scroll in the menu.

Does your current technique of floating groups set to page height provide a scroll bar when content expands beyond the set height?

I want to allow users to add content that will be displayed in a repeating group. Currently the method of adding scroll bar creates an issue when the repeating group is loaded, unless the repeating group is set to vertical scroll itself, so there is not much reason for the side menu to have scroll as well.

The issue though is that I am also wanting to use a scroll in a group focus for a header drop down menu with lots of selections from a repeating group and scroll is necessary in that.

1 Like

Thanks for that video. Do you happen to have a editor in public view that I could poke around to get a sense of how everything is set up?

I’m curious about the settings on the floating group for page height – was this set dynamically to equal the current page height using CSStools?

Also, curious of what the design is like ( ie: size of floating group in editor to add all the elements needed inside of it.

This issue of the size of floating group in editor while designing has caused a bit of confusion for me, as I want to add more elements than could fit in the floating group unless there was a scroll.

By the way, if you don’t have a publicly available editor, a video showing the set up in the editor would help out as well.

Cheers

sure,

Hello, is it possible to see how you did because I would be interested for having the same effect than your right bar !
I tried with Custom CSS but it does not work…

Thank you,
Charles

This is a much easier and straightforward way that will always be accepted by Bubble, meaning requires no Custom CSS.

The problem with using Custom CSS as explained to me, is that bubble will override it if their CSS has an issue with it, so best to try and build everything in bubble without Custom CSS or HTML and JavaScript.

1 Like

Perfect and easy, thanks !

1 Like