How to make cellHeight fill container height

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

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 ?

cellHeight: 'auto' means squared cells, not dividing 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

@ptorrent

@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

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`)
}

@billyc

@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.

@adumesny

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! 🙏

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

UPDATE: api doc is now auto-generated.

new cellHeight:'fill' so rows divide the (fixed) grid height

Navigation Menu

Repository navigation

How to make cellHeight fill container height #2583

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

How to make cellHeight fill container height #2583

Description

Activity

ptorrent commented on Dec 18, 2023

adumesny commented on Dec 19, 2023

masum-mollik-rocketml commented on May 3, 2024

billyc commented on Dec 17, 2024

adumesny commented on Dec 17, 2024

billyc commented on Dec 17, 2024

adumesny commented on Dec 18, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions