Gridstack.js: support for nested grid to take entire parent height (simulate % rows, like columns do)

[adumesny]

I'm using nested grids to create compound widgets - tight group of widgets, that can be used as opaque widgets inside other grids (moved as a unit, edited separately). As suck I need a nested grid to take entire space (width AND height) given by the parent gridItem, which will have user resizable heuristics.

Ideally I would have a grid.cellHeight = 'dynamic' mean take entire height of the parent, similar to what we have today with columns taking entire width (% based sizing). Adding a new item would temporally create new rows (create scroll V bars as content won't fit) as you drag/position things around, but then size to fit as you release (shrink the cellHeight to fit, keeping same rows# and overall layout)

for now I'm trying to hack in on the side.... not working the simplest part yet!

Your environment

v 0.3.0 and latest 1.0.0-dev showing slightly different behavior (due to

Steps to reproduce

1) https://jsfiddle.net/cLdzzL8p/2/
is a copy of demo/nested.html with additional code to handle item resize
$('#grid').on('gsresizestop')
2) pretend to resize the griditem on right (nested) or just make it wider to trigger event
3) oldCellHeight = 60px should go to larger number (140px for same 300pix gridItem)

Expected behaviour

nested grid to take entire height of parent (dynamically changing)

Actual behaviour

in v0.3.0 (gridster sample) the grid DOES grow and take entire height, forcing cells to get taller as well, BUT all the siblings gridItems also grow (making me thing either it's an incorrect shared resource or the $() search is not filtered to children of nested grid.

in 1.0.0-dev (the one I use) noting seems to appears as GridStack.prototype._updateStyles() returns early due to this line of code that was moved ealier

if (this._styles._max !== 0 && maxHeight <= this._styles._max) { return; } // Keep this._styles._max increasing

see https://github.com/gridstack/gridstack.js/commit/a38d78eebe59686a6ffea1b802791ac39e15de2d which I don't understand. #766 as well

[adumesny]

same/related to #717 #728 #118 #404 and probably many others... would be ideal to have cellHeight = "dynamic" as a way to support grid take 100% of parent height (triggering resize events on parent might not be trivial and container specific. in my case it's another griditem/div, but it could be outer window/div), while allowing add/remove and dragging of items in that allowed space.

[krilllind]

@argument Or you could set the height to X amount of rows and then gridstack would use the height of itself or parent to split into X rows. That way it would work the same way as width does now.

Then only specify verticalMargin if you want spacing between each row. For auto expanding height behaviour, you could set height to "auto" instead?

[adumesny]

Or you could set the height to X amount of rows and then gridstack would use the height of itself or parent to split into X rows

@krilllind if you have fixed # of column (12) and rows then you can't really add/remove content without sizing them down and you still have an absolute max. height today should really be maxHeight (or `maxRow') as it specifies the max number of rows you can have, so it sort of does what you suggest.

This and the other request are to have grid fill the available height provided by parent, but still let you interact/add/remove items.

[nissimpradhan]

Have you made any progress on this issue? I have this problem as well as several others. Here's the new issue that i made. # #814

[Altraya]

Have you planned to release this in a new version soon ?
I've made a special patch for my own need but it's not satisfying and it include other bugs in my version.
I am really looking to a lasting solution for this.

[adumesny]

@Altraya I have not looked at a fix but would love to have someone submit a code review for this!