Complex UI app scrolling / default app views

[toby2]

Here’s a pretty standard app layout I reckon, but I’m struggling to get to grips with it.

I’d like to build (well building) an app with three key parts:
1 - List of Items on the sidebar
2 - Data (dates/usage/etc) which follows the same order from the list on the side.
3 - A header that sticks.

Here’s a mock up:

This is very similar to when you have an Excel sheet with a fixed row as a header, and two fixed columns on the left. What you’re able to do it scroll vertically up and down on both the sidebar (1) and the datapanel (2) but only scroll horizontally on the data panel (2), but no horizontal scroll on the side bar (1).

Now I’ve tried with a bit of javascript & html IDs, but maybe due to the way repeating groups are created, it’s not getting picked up by the javascript despite it being loaded correctly and seeing the elements.

So… question is… how would you solve this?

Thanks,
T

[cmarchan]

Hope this helps!

How to build a simple dashboard in Bubble: Dashboard tutorial 1/3

[hergin]

Although, I could do this somehow, it looks like not stable, so I wouldn’t suggest doing it

Here is the demo:

The page is set as align to parent and here are the groups I have created in the element tree:

Here is the header:

Here is the sidebar:

Here is the sidebar longcontent:

Here is the body:

Here is the body wide content:

The final thing I had to do is a CSS trick by using CSS Simple Editor plugin.

1. Enable the element IDs in the settings:
   
   
2. Assign an ID to the body group:
   
   
3. By using the plugin, you add some custom CSS to the page by dragging and dropping a CSS Style element.
   

In conclusion, I wouldn’t suggest using this approach

[toby2]

Thanks - I’m pretty well versed with the dashboard side of things – This isn’t the purpose of what I’m trying to achieve. Thanks though

[toby2]

Yeah I mean I kinda get he same effect, just that I don’t get the synched scrolling…

Thats the bit I’m missing the most.

[toby2]

This is what I’m going for:

but as you can see the right panel (section 2 in my diagram) isn’t scrolling in sync with section 1 (the side bar)

[cmarchan]

Create a new test page and experiment placing sections 1 and 2 inside a group with a max height. This does change your structure but if it works you may consider adapting the rest.

[toby2]

I got it to work with some javascript, it’s not perfect yet, but when I nail it, I’ll post the answer.

T

[toby2]

So in the end I’m still trying to achieve this style of repeating group navigation where the ‘test’ text is in a floating group and the ‘row’ text is not…

See this example: https://codepen.io/tobyallen/pen/ExMaPMw