Gridstack.js: Static grid min-height option

[silverwind]

It would be quite handy to have a option to stop gridstack from auto-sizing the container height to the last element. I have somewhat implemented this in my personal fork, but decided to not PR it because I encountered unresolved item overflow issues caused by the collision detection code.

Basic example: Imagine a shelf, 10 rows high, 1 unit wide. The user can drag up to 10 items in from a second gridstack into the shelf which has space for exactly 10 items (or 5 double-height items). In this use case, having the grid auto-size down is really not ideal.

[radiolips]

Hey, @silverwind ! I'm not exactly sure what you mean. Are you saying you want the height to be the height of ten rows and you don't want it to get bigger or smaller?

[silverwind]

Yes, exactly. It should never change. If for example I define a fixedHeight: 10 option, the container should always be that height. This also means it should reject additional items if there's no space left (by aborting d&d event handling).

[radiolips]

You should be able to pass height: 10 as an option when you initialize the grid. That's not working for you?

[radiolips]

https://github.com/troolee/gridstack.js/tree/develop/doc#options for more information on that.

[silverwind]

I'm not sure whatheight actually does, in my tests it neither sets a minimum nor maximum height. Let me show you some examples:

1) Current release with height on left grid: https://jsfiddle.net/silverwind/xqf4awsr/
2) My fork with height and staticHeight on left grid: https://jsfiddle.net/silverwind/tzppdsyv/

Start dragging some items from the right to the left stack. Note the empty space in my fork and that it's impossible to drag the 6th item over because the left stack has reached height.

[radiolips]

Ah, I think that's actually a bug with the two grids. When you use one grid, height sets the max amount of rows. It should also prevent you from increasing that amount when dragging in a widget from a second grid, but it's not.

[silverwind]

height sets the max amount of rows

So I guess all that I'd need is a way to set a minimum amount of rows. Maybe height should be renamed to maxHeight and a new minHeight could be introduced, as I think there are use cases to set these individually.

[adumesny]

Yes I have the need for a minHeight as grids will collapse to 0px height when you remove the last item in them (can see in demo apps), making it impossible for users to drag it back in. I worked around it (applying a custom CSS style on remove event only as it messes things up otherwise. But it's UGLY and seems basic.

The current 'height' being supposedly for maxHeight is confusing IMO.

Should I file a need a minHeight ticket ? it's actually more like minHeight when empty, else the item could be 1 row and allow you to drag into it anyway.... @silverwind needs if I understand is to have a fixHeight (where min=max=10). But I would be happy with minHeight and could set it to 1 (even though today I use 4 to give it a bigger drop target, which collapses tight around items once non empty)

[radiolips]

I understand this to be fixed by #775 . Please let me know if this is not the case.

[adumesny]

@radiolips I think they are slightly different. CSS min-height in px will work, but having minHeight=10 (rows) as a property would be easier to use. Also having a maxHeight=10 would make it fixes number of rows which is what @silverwind was asking for I believe.

[Hedva]

I agree with @adumesny

Having a minHeight / maxHeight for the grid makes more sense. Using amount of cells as value.

Currently the height doesn't make much sense, because if the height is 8, and the lowest cell is 4, the grid will collapse to 4. Makes more sense to rename it to maxHeight, and add another option; minHeight.

Currently i just use this to make it work:

let numberOfRows = $('#grid1').data('gs-height');
let minHeight = ((numberOfRows * options.cellHeight + ((numberOfRows-1) * options.verticalMargin)));
$('#grid1').css({'min-height': newHeight});