Content shifts when loading more items into table

Hi everyone,

I have a table with a bounce of elements loaded with virtual-repeat, each element can expand and load children below. If I have scrolled vertically and I toggle the children of an parent element, the content shifts when the children are loaded, making it hard for a user to keep track of what element they toggled.

Have anyone experienced anything like this and how did you solve this?

1 Like

Can you give a gif demonstrating the issue? or maybe a gist?

You should be able to see the issue on the gif below

1 Like

I think that this is standard behavior in rendered HTML. (At least I think it’s not something specific to Aurelia.) If a container’s content is resized (like collapsing certain regions in it), the scrolling position might be adjusted so that the content neatly fits into its container again.

I think it would be pretty difficult to avoid that automatic scrolling behavior without seeking refuge to hacking and quirking practices (like setting fixed or calculated margins/paddings, setting fixed/calculated container heights, or manually adding whitespace or empty elements to the container’s content).

Perhaps it might be an idea to accept this behavior and use some additional CSS styling for the clicked/focused item (setting a background color, or a shadow, or …) so that it can be easier seen in the (scrolled) list?