grid items to take entire parent height (simulate % rows, like columns do)

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 such I need a nested items 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

https://jsfiddle.net/cLdzzL8p/2/
is a copy of demo/nested.html with additional code to handle item resize
$('#grid').on('gsresizestop')
pretend to resize the griditem on right (nested) or just make it wider to trigger event
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 a38d78e which I don't understand. #766 as well

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.

@argument

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

@krilllind

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.

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

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.

@Altraya

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

ironically I own the lib now but have not looked at my early request as my needs have changed since then... :)

@adumesny

@adumesny was this ever completed ? i'm not using nested grids but i've read through all the other issues... I'm trying to achieve can the height of a grid be 100vh and resize the inner items to always stay within that height so the user never has to scroll ?

Edit: @adumesny - After Reading other threads it seems that I might be able to hire you to help with this issue? Please let me know. Thank you!

yes, donation are always welcomed. v6 has been released so I'm available to work on features again... ping me directly

Hi, how it's going on that issue? Is it possible to have 100vh grid with auto scalable items inside?

not going to happen (I don't need it for work) unless someone wants to support it... not an easy feature.

(sub)-grid would look like this (yellow being 'full screen') with each component number representing # of rows (h) as you add/resize items. not matter what you bring in (how tall h) it will eventually scale all to fit into 100vh (or other) grid. so technically row are changing % to the min/max/current always fit 100% of the container

Hi,

As I was trying to achieve the same thing I gave the following a go:

In the CSS:

.grid-stack {
  display: block;
  overflow: hidden;
  height: 100%;
  min-height: 100% !important;
}

and in the JS:

const N_COLS = 12;
const N_ROWS = 12;
var grid = GridStack.init({
    column: N_COLS,
    cellHeight: 100 / N_ROWS,
    cellHeightUnit: "%",
    maxRow: N_ROWS
});

Unless I have missed something, it seems to achieve the desired behaviour with no change to the gridstack code.

ok good to know. didn't think cellHeight:10% worked. glad it is. even if you resize the window ?

Hi, for the nested grid demo https://gridstackjs.com/demo/nested.html#, may I know which part makes the second nested grid to be taking the full height of its parent? I have followed the code, but on my end, the nested grid still can't take up its parent's full height.

My second approach is using addWidget to add sub grid, by that way, the sub grid cannot take up the full height of its parent's, do you have any suggestion on this issue?

closing due to age

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

Navigation Menu

Repository navigation

grid items to take entire parent height (simulate % rows, like columns do) #787

Your environment

Steps to reproduce

Expected behaviour

Actual behaviour

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

grid items to take entire parent height (simulate % rows, like columns do) #787

Description

Your environment

Steps to reproduce

Expected behaviour

Actual behaviour

Activity

adumesny commented on Sep 20, 2017

krilllind commented on Sep 20, 2017

adumesny commented on Sep 20, 2017

nissimpradhan commented on Nov 10, 2017

Altraya commented on Dec 9, 2019

adumesny commented on Dec 9, 2019

adumesny commented on Apr 12, 2021

digitalml commented on Jul 28, 2022

adumesny commented on Sep 6, 2022

boskiv commented on Sep 18, 2023

adumesny commented on Sep 18, 2023

adumesny commented on Oct 20, 2023

0uk commented on Feb 9, 2024

adumesny commented on Feb 9, 2024

gosongying commented on Aug 5, 2024

adumesny commented on Aug 30, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions