The grid-stack item should expand its height to fit the content

[karanbedre]

I'm encountering an issue with the expansion panel when using it with a specified column height in a grid-stack-item. When the expansion panel is expanded, a scroll bar appears within the item instead of the grid-stack item expanding to fit the content. I would like the height of the grid-stack item to automatically adjust based on the content inside when the expansion panel is expanded.

Your environment

• version of gridstack.js - "gridstack": "^10.1.2",
• Angular version - 16.2.0

Steps to reproduce

1. Create a grid-stack layout with items having a specified column height.
2. Add an expansion panel inside a grid-stack item.
3. Expand the expansion panel to reveal more content.

Expected behaviour

The grid-stack item should expand its height to fit the content of the expanded panel, without showing a scroll bar.

[

https://github.com/gridstack/gridstack.js/assets/17941794/35628ff5-5e9d-46cc-8c6f-a6a20c521059

](url)

This is my grid stack options gridOptions: NgGridStackOptions = { column: 12, cellHeight: '130px', minRow: 6, disableOneColumnMode: true, removable: '.trash', acceptWidgets: true, float: false, resizable: {handles: 'e, se, s, , w, , n'}, };

[shyam1992]

We also have this need and I couldn't find any demos which support this requirement.

[adumesny]

first off you don't seem to have sizeToContent:true as you are able to size it taller than content. second GS doesn't know when content changes, it's up to you to call to size to content api when dom item changes (we only track grid|window resize), third you didn't provide REQUIRED running example. closing.

[Codennnn]

You can use resizeToContent() to manually handle height adjustment.