Scrolling the part of embedded containers in container

Targets Web
1

I’m looking for a solution to scroll part of embedded containers inside of another container, something like a Freezing the Panes in an Excel.

At the moment all my embedded containers can scroll in all directions.
Below is the schematic: the black rectangle is the main containers, the others are embedded into a main container. The orange containers are referencing data, light blue - are just data.
User comparing the data from blue fields with orange fields and do other stuff.
Everything is working just fine…
image
Until the moment, when the number of columns increased and user have to scroll to the left to see the data from orange fields.

Now, I want to freeze orange containers, so only light blue can be scrolled to the left and right.
Here, how to sync vertical scrolling between orange and light blue containers?

The main container’s position is locked to page size, so it is resizable.
I don’t resize the embedded containers, as they are all have pre-dimensioned sizes and scrolling inside of main container.

I’ve tried the Scrolled event - always showing the same initial value for main container. The same happening to embedded ones, can’t get the proper Top value.

The only solution I think is possible ( haven’t tried yet ) - add two containers into the main one and embed small containers for orange to the left container and light blue to the right container.
Again, how to sync scrolling?

Thanks!

2

Finally, I was able to achieve scrolling of separated containers.
Here is the short video.

ze

5 Likes
3

Here is the source code

2 Likes
4

For those who likes to play with CSS styles may find the two methods of converting CSS declaration into a Xojo Wbe Style format.

The first method CSStoStyle is reading the array of pairs (property and value) and returning the WebStyle:

Var myStyle as WebStyle = CSStoStyle( "color" : "white",  _
                                      "text-shadow" : "2px 2px red")

The second method CSStoStyleS read declarations as a string and returning the WebStyle:

Var myStyle as WebStyle = CSStoStyleS( "color: white; " + _
                                       "text-shadow : 2px 2px red;")

By using the second method, you can simply copy-and-paste the desired css block with little editing if not into your Xojo code.