menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

CSS in JS

All things styles in JavaScript!

Channels
Team

Page jumping if content height changes

August 27, 2018 at 2:12pm

Page jumping if content height changes

August 27, 2018 at 2:12pm
Hey,
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
Hi Christopher, maybe if you can play with `min-height: 100%` of the container list? It really depends from the markup and css applied. A codepen would be very helpful for sure.

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.
like-fill
1
(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
like-fill
1
Whoops, sorry! I meant to say align-items: start.
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 figured you must have meant `start` so I played around a little with it before using a extra container :) The problem I encountered with it was, that if I had only 2 rows of elements the grid itself would stretch out and I would have quite a large gap.
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.
like-fill
1
thanks again for your help!