Scrolling flex containers side by side, matching and positioning

Ignition
1

What I want to know:

  1. How do I align two side by side flex containers size 880px so that the graphs I am scrolling on the right side align with my “source data” graph in the left container?

  2. Is there a way to set how far a scroll is performed in a flex container?

Conditions:

  1. I want to avoid any nesting of views.
  2. I know I can setup a script to change the graph on the right, but I want to have the graphs loaded when the page loads.
  3. Can’t share much about it.

Details:
In general, I have a header and a body using flex containers in a flex container.
The body is split into two sides.

Top:
Header is 33px tall

On the left side:
I have a column basis 880px containing my source data.
Grow is set to 1

On the right side:
I have a flex container column of 3 flex containers with a graph in each.
Each is 880px.
The top begins aligned when the page opens.
When I scroll to the second graph, it is either too high or too low to align.

2

You actually can, you can create a generic sketch (wireframing) that doesn't include specific or company info.
See this video, Design Like a Pro: How to Best Plan Your Perspective Project | Inductive Automation at about 37:30.

3

I watched the video, but I don’t think I understood what you meant.

image
image107×747 1.22 KB

The right side flex container is too high on scroll.

So I scroll down.

Then the right side flex container is too low.

image
image88×761 941 Bytes

On a side note, at least I can once again upload images.

Is every scroll 100px?

Looks like Chrome default is 100px a scroll tick, and that my page is 880 instead of a multiple of 100.
So I end up with a 20-80px offset each time.
This only applies to Chrome though as Firefox uses some wonky measure function, and I don’t know what other browsers use. The mice vary some too, but usually a tick is determined in the drivers.

100px seems like a fair standard, and Chrome is a fair standard. So I am going to use 100px intervals on my containers.

4

Can’t you just put them in another container and scroll that instead ?
That seems like the easiest and most robust solution.

1 Like
5

I am not sure which things you suggest to have where.

I have source data in my left column that never moves. (table 400x600)
I have the graphs on my right column that can be scrolled down through.
(graphs 1200x600 which were in 880px tall containers that I switched now to 800px or 900px )

Do you mean:
The graphs are about 1200px wide, set them side by side so the source data and graphs will always be level.
They would be robustly level.

I am trying to get away from scrolling horizontally in my pages.
Right now, my solution is having the top of my right side container graphs periodic with 100px for scrolling in Chrome.

6

I was mistaken about what you were asking, forget my previous post.

What want, if my understanding is now correct, is basically a vertical carousel, aligned with another container. Is that it ?

7

That sounds similar.
I think it is solved though.