Grid size based on content

[Techn1x]

Have been implementing this library to help create a grid for importing records, I noticed the container has a fixed / static min-height 300px by default (as the guides mention) as well as a 100% width

I wanted to share a slightly different approach to the grid sizing, where instead of the content growing to meet the fixed container that never changes, the container grows with the content (up to a maximum size, if desired)

The width is easily taken care of with width: max-content - it will even let you expand that last column rightwards if needed

<revo-grid class="w-max" />

The height needs some more complicated CSS to undo all the cascading "height: 100%" values everywhere

<revo-grid class="w-max revogrid-autoheight" />

.revogrid-autoheight {
  min-height: unset;
}

.revogrid-autoheight .main-viewport,
.revogrid-autoheight .rowHeaders,
.revogrid-autoheight .rgCol {
  height: unset;
}

/* this is optional, if you want scrolling or not */
.revogrid-autoheight .inner-content-table,
.revogrid-autoheight revogr-scroll-virtual.vertical {
  max-height: 32rem;
}

https://github.com/user-attachments/assets/717dea40-cc56-4373-abc7-39c80c4439be

This of works in my simple scenario, but likely breaks things for more complicated grid's using features that I am not. One drawback is the minor flash on the right, as the grid seems to accomodate the scrollbar size for a split second

Is this something that should be implemented, maybe as a different theme or plugin or layout option for the grid?

[m2a2x]

Hi @Techn1x! I've been trying to achieve similar things without rebuilding whole grid layout. Yours looks nice!

I would test it on a more complicated layout, the one you have is very basic. The most complex one is when you get pinned rows (top and bottom) and columns (left and right). Then things become nasty! Thanks for sharing example!

[Techn1x]

Thanks for the feedback!

Out of curiousity I gave it a go with pinned rows and columns, it still seems to work just as nice - though if you try to resize the pinned columns, it seems the horizontal scrollbar appears

Either way, happy for you to close this issue if you like - I just wanted to share in case others are looking for the same kind of thing, or if there was appetite for it to be added to core

https://github.com/user-attachments/assets/6a17a42f-e70d-4c6a-a019-2a4ccf7e16a5

[m2a2x]

Looks cool, I wanna try it myself later this week too, probably we'll make a small plugin to see how it fits. Will close it afterwards.