Dynamically sized grid with some parts scrollable
For reasons that shall remain a mystery I am trying to create a DAW (Digital Audio Workstation) UI in the browser. One of the main features of a DAW is the arrangement view, where tracks are laid out horizontally with the track info to the left and the timeline to the right, like in Image 1.
Although the track heights look fixed/similar in that image, it’s important that they are dynamic and can have different height, for example when you enable the automation lane, like I have done for the first track in Image 2.
So far so good, even I could solve this with a regular grid (I think). But the problem is that the timeline needs to be horizontally scrollable while still being part of a dynamically sized grid. The attached video shows what I mean.
So the scrollable grid cells in a row need to be connected to the non-scrollable cells in the same row, height-wise, while still being scrollable within their own sub-container (logically speaking–I don’t know that such a container element exists).
My own feeling is that this just isn’t possible without having two grids next to each other and using JavaScript to synchronise the heights between the track parts of each grid (track info 1 in grid 1 needs to match the height of timeline 1 in grid 2 etc.). But things are moving fast in the CSS world, so maybe there is a clever solution that I’m not aware of?
6 Replies
I’m curious if the lack of response to this question is due to it being poorly explained and difficult to understand, or if it is because there is no solution to it?
I think it's just difficult to tackle 😄 never realized something like this that we take for granted could be so complex.
maybe something like this would work for you? It's a tripple nested subgrid. you do need a fixed amount of columns though
https://codepen.io/MarkBoots/pen/gOyBrWY
Whoa, that actually seems to do exactly what I want 😲 I’m still playing around with it, but so far it seems to handle everything perfectly - wider info cells, variable track heights, single timeline cells - they all just work! The one little nitpicky thing that will look different than most actual DAWs is that the scrollbar extends below the info cells, instead of being just under the white cells, but that’s not really a problem. Thank you so much, I had almost given up on this 👍
no problem, you're welcome.
Keep us up to date with your project, very much like to see it when you're done
Well, I don’t know if it will ever be done, it’s more of an experiment, but it’s coming along nicely. You can’t really see the scrolling here, but your method definitely works.
