Fixed header within card, when card itself can scroll out of view
Got a simplified dashboard setup in the codepen.
The div
page_main_content is scrollable with a fixed page_main_content_header of variable (thus unknown) height and a body page_main_content_body. The body contains a card (of dynamic height) and pagination. The card itself has a header card_header that is fixed height and should stay in place when scrolling the page_main_content.
Issue is I can't use position:fixed on the card_header as the card width is dynamic.
Here's the basic codepen:
https://codepen.io/Ma-Kas/pen/dyLeYVe
Here the kind of intended behaviour with positon:fixed (minus the obvious ugly scroll overflow):
https://codepen.io/Ma-Kas/pen/BaExome6 Replies
have you tried position:sticky?
Yeah, have. Doesn't work as the container itself (card), scrolls up in the page, so the header goes up with it. I mean, I can kind of hack it together with sticky, if I get the computed height of the header, as well as the margin between header and card in JS, then set the top of the card_header to the sum of that. Then deal with the overflow in the gap by covering with some other element, but was wondering if there was a more elegant CSS-only solution.
taking a look at this one. I actually just wrote a very complex layout with this pattern last week, so I can probably help out here.
Here's a pen for you. I rewrote most of the structure and used CSS grid. if you resize the page you'll notice that the content becomes scrollable if needed. because I've used grid in multiple levels, the "sticky" card header is not really sticky and is its own section meaning that its expandable and you don't have to worry about
top. Personally, I prefer to avoid using absolute positioning as much as possible and fixed does not relate to parent classes and will always go to the top of the stack, meaning the document level and not the parent tag.
Something that I tell engineers when I do code reviews at work is "less is more." In this case, I mean that you should think about writing as little code as possible to achieve the same result - so lots of classes will make your code very confusing for yourself and also having different formats of how you're writing your classes will add to that confusion. CSS Grids make this really simple by setting everything at the same level and being able to create very simple classes and organizing them in any way that you would like.Thanks a lot for your help, mate. Appreciate it. That change in structure will introduce another issue in the actual (non-abstracted) dashboard, but I think I have an idea how to solve that already.
Sounds good. The same pattern just for the content should work on its own as well. I also prefer it that way because the scroll bar more accurately represents the content that is being scrolled instead of including a sticky element.