Variable-height Stylebox in a Matrix component

Is there a way of displaying a variable-height Stylebox in a Matrix component ?

Hello Laviregen!

That’s not possible for now, the matrix’s stylebox should have a defined height that will be shared by all of the styleboxes within it.

It is possible to redefine the height of the style boxes contained within the matrix by targeting the children of the “innerScrollContainer”:

.innerScrollContainer > div {
     height: fit-content !important;
}

However, I’m struggling to manage the space between these style boxes, even though there is no margin or padding set…
Maybe by sharing these components on Qodly’s GitHub, it would allow us to customize them more easily for our projects?

Hello Romain,

If you are familiar with React and TypeScript. you can create your own using @tanstack/react-virtual. it’s a headless libraries that help you display massive data and support dynamic height and infinite scroll.
here’s an example of it : React TanStack Virtual Dynamic Example | TanStack Virtual Docs

Hello Romain,

You can try this component. It’s under development

Fell free to fork it and change it.