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