Having groups remain in place

I have a repeating group that uses ListShifter to place news articles into text boxes. The text boxes are designed to scroll because the amount of data could be long so the text boxes show only 10 lines of data.

There is an odd problem that I’ve had to correct using negative positioning to try and specifically place groups that are below this repeating group on the page because the length of the text within the text box still seems to control where the group below will begin. At least under certain conditions.

The various articles are each a different size and what is happening is that when shifting between these articles, the lower groups will bounce up and down depending on the size of the SHORTEST text box. What is odd is that this only happens when shifting in one direction. If I change directions once, the groups below stop bouncing around and I can go either direction without issue. This can be seen in the video at this link:

I have used CSS to try and fix the height of various elements in the hope that the lower groups would only adjust their position according to something other than the invisible text box size but nothing that I’ve done seems to work.

Any suggestions as to how to force the lower groups remain in a fixed position below the repeating group would be welcome…

Because I was able to determine that the issue corrects itself by scrolling, I tried setting a workflow action to “Scroll to entry of” and targeting the repeating group and selected the first item. The “Scroll to Entry of” action requires setting the RG to have one of the scroll options set (which I didn’t want because I’m using ListShifter) but it got the job done.

Next, to get rid of this unneeded scrollbar, I had to do a bit more editing of the CSS style for the RG (below) and I added “FixedScroll” to the RG’s ID Attribute field.

#FixedScroll {
overflow: hidden !important;;

Hope this helps others with a similar problem.