Forum Academy Marketplace Showcase Pricing Features

How to deal with sidebars in bubble

I am making a bubble app and I am new to this platform. I watched various videos and webinars on how bubble deal with the responsiveness yet I have a doubt and I am unable to deal with this particular problem.
In my design, I have a sidebar included in the main page which extends to 3 sections of the page. Now I am not sure how bubble will deal with this thing and how will it organize the page structure. If anyone can help me in this regard or point me in the right direction or if anyone can suggest any video/webinar explanation of this situation, that would be of great help. Thanks!!

Can you show some screen shots to help illustrate your issue and setup.

Also, please expand on the meaning of the sidebar extends to 3 sections of the page.

@boston85719 Hey sure this is the screenshot of the page.

Sidebar extends to three sections of the page means that the sidebar is not included in the whole page. We can say it like this that its height (or we can say the area where we want to show the side bar) is only three groups on the main (three main divs/containers). Rest of the page doesn’t include the sidebar.

I can also provide you with the link of the app for you to view

Bubble will not do anything in regards to the height of things like the sidebar. When making a sidebar most people will create one to fill the entire height of the page and which is dynamic in that when the page height is not tall enough to accommodate all content of the sidebar, a scrollbar is added so all content is still accessible.

When I create my sidebars I use custom css and have a floating group that acts as the sidebar…others use a floating group and make it the entire height of page, while some use the sidebar plugin.

But how do we make the contents of the side bar dynamic. Like we want the contents in it to be dynamic. Currently I am hiding the side bar after a certain width. If I don’t hide the sidebar its contents are being displayed at the end of the page which I do not want. So, how do you deal with such things in mobile and tablet view?

Using dynamic expressions. I usually have repeating groups for my navigation options and I create option sets for those, so the RG contents are dynamic.

By hiding the sidebar using hiding rules in responsive editor. I have another group that is visible when the sidebar is hidden and that has an icon to click to show the sidebar again.