Achieve scrollable content where other content needs to stay in view upon expanding
I didn't know how to word the title since it has limited amount of characters but I will explain bit more here.
I have a container that takes the whole screen height (
100dvh).
In that container I have a footer that's always fixed to the bottom of that container.
Above that footer I have another container that takes rest of the height space of the initial container.
Now that container has drawers (or details elements) that, of course, expand vertically. What I want to achieve is that when, let's say, we have 3 drawers, if I open the second drawer, the first and last drawer are still in view and the content of that second drawer takes up the available height and is scrollable depending if the content inside of it overflows or not.
Attached image shows what I am trying to achieve.
Here I have created a minimal reproducible example, I hope it is enough: https://jsfiddle.net/17x6ec29/83/
I don't mind if it's written in React, JS/TS.Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
3 Replies
Small bump
I have had a go at creating something that might help you.
I opted not to use the details syntax as that is quite limited and generally not user-friendly (no doubt debatable).
Instead I have used CSS grid rows animation and the rows are toggled with hidden checkboxes buttons (this could easily be changed to use JS).
It wasn't clear if you wanted to allow the drawers to be open at the same time. In my version I did allow this but again, this could be altered.
Finally it does use some JS to caluclate the maxmim amount of height available for each of the drawers so as to maintain all the others visible, even when they are all open. Obviously this could result in the actual drawer heign being quite short if you have lots of drawers and are using a small screen.
Anyway, more as something that might help you along than an actual solution.
https://codepen.io/cbolson/pen/rNgwVaX
Chris Bolson
CodePen
Accordion - keep all elements visible
Accordion with max height on sections to keep all of them within the viewport. Uses JavaScript to calculate the max height of each drawer. https://di...
Thank you a lot!!! This definitely helps a lot 😄
I had the same idea to use JS for basically the same reason so I am glad to see you did the same 🙂