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?
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?
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
