How to make cellHeight fill container height

[ptorrent]

Hello there,

How to create a checkboarder with a fixed container height (without scroll). How to make rows working exactly like column ?

Example:

column : 3
row : 2
with 6 items

Column : 3
row : 2
with 3 items

colum : 3
row : 3
with 3 items

colum : 3
row : 3
with 2 items

Actually it's working well for column. If I set column = 3 and I've only 2 item, the size of items are correct. There is an empty space for the 3th item. But we don't have the same behavior for rows...

Container width and height always the same : 800x600

[ptorrent]

By setting grid.cellHeight = 600 / 4 (number of rows). It seems working... is there a way to do it automatically ? "auto" doesn't work..

If I set row = 4, column = 4 even without item in the grid, the height of .grid-stack is set to 1302px ?

My grid options :

{
    "column": 4,
    "row": 4,
    "cellHeight": "auto",
    "margin": 25
}

The html result :

<div style=" height: 400px;">
<style type="text/css" gs-style-id="gridstack-style-13038"></style>
<div class="grid-stack grid-stack-instance-7169 grid-stack-animate grid-stack-4" gs-current-row="4" style="height: 1302px;"></div>
</div>

Maybe the question is why the .grid-stack height is set to 1302px ?

[adumesny]

cellHeight: 'auto' means squared cells, not divinding the page height by # of rows since # of rows is not something typically fixed (unless you set it). asking for a new feature like cellHeight:'fillPage' or something, or specify cellHeight:25%

related to #787

[masum-mollik-rocketml]

@ptorrent
set cellHeight: '1em'

find the parent element of the grid and set the font size dividing the height by the count of the rows available in the grid. Execute it after view initialization.

setCardFontSizeBasedOnHeight(gridParentElement: Element|HTMLElement) {
    const height = item.clientHeight;
    item['style'].fontSize = `${height / gridRowCount}px`;
  }

call the method each time the window size changes

[billyc]

I have the same need for my situation. This code worked for me: you need to know the total height of the full gridstack, which is always the largest y+height of all grid items.

Call this when the window size or layout changes. Note the this.grid is saved from Gridstack.init()

resizeToFillVertical(parentId: string) {
  const parentElement = document.getElementById('parentId')
  if (!parentElement) return

  const totalGridHeight = this.grid.getGridItems().reduce((a,b) => {
    return Math.max(a, b.gridstackNode.y + b.gridstackNode.h)
   }, 0)
  const height = parentElement.clientHeight
  const newCellHeight = Math.floor(height / totalGridHeight)
  this.grid.cellHeight(`${newCellHeight}px`)
}

[adumesny]

@billyc no need to find the row count yourself. just call grid.getRow() or check the gs-current-row attr also set, which both take minRow and row into acount (might be empty space) if set, otherwise grid.engine.getRow() does what you have above.

[billyc]

Ah! thanks @adumesny, that definitely makes my code a bit simpler. I don't see getRow() in the API docs... didn't know that method was present.

Thank you so much for maintaining this library -- it does exactly what I need! 🙏

[adumesny]

the doc is not auto generated from code - need to change that - so it can be out of date/missing sometimes...