Page jumping if content height changes
August 27, 2018 at 2:12pmPage jumping if content height changes
August 27, 2018 at 2:12pmHey,
this is more of a general question than a css-in-js problem but I thought I give it a shot. I got a list of elements at the bottom of my page (presented in card style) which are all visible in the beginning but can be filtered by the user using certain categories (presented as clickable tags above the list). Now the user chooses a filter option and lets say out of 100 elements only 2 remain. Depending on the original scroll position, the page now jumps up because the height gets smaller (less elements). It jumps again if the user filters for something else and the content gets larger again (more elements).
Has anyone some guidance how I could fix this problem? If it's not really clear what I mean please tell me, I'll try to explain some more.
Thanks in advance
August 27, 2018 at 3:21pm
August 28, 2018 at 8:11am
thanks for the reply, here's a quick codepen to illustrate the issue https://codepen.io/simerlec/pen/WgxRZe
if you scroll the filter options so that they are on the top of the page and press FILTER ONE the page jumps (for obvious reasons)
the markup/css in the project is basically the same (grid with card like elements)
You can fix the issue quite easily by ading the rules
align-items: top;min-height: 100vh;
to the
.grid class.(align-items is needed to prevent the cards from stretching vertically when there are just a few of them)
hey Dion, thanks for the suggestions but align-items cannot have the value top. But your suggestion brought me to a solution I can live with. Basically I created a container around the css with min-height: 100vh which now prevent the page from jumping around if the content of the list gets too small.
thank you
But sure, a container element works just as well – probably a cleaner solution anyway, since you don't need to mess with the grid alignment to make it work.
I see. There's yet another grid property that you can use to alleviate that problem:
align-content: start;But really, at that point it's clear that a container element is the nicer solution. Keeps these two concerns (grid layout and managing the space the grid takes up) neatly apart
You're right, that would have done it - but I agree, the container is the nicer solution to this issue.
thanks again for your help!