Changing rows after init doesn't work, component has to be re-created

Subject of the issue

As reported here, it appears that changing row options after the component has been initialized (in my case becaues it asynchronously loads a configuration) doesn't seem to have any effect. If I apply those options at the first creation, they work.

Your environment

version of gridstack.js -12.2.1, using the Angular library
Chrome 2025-06

Steps to reproduce

The JSFiddle isn't for Angular, so it's not relevant, but this happens when I set the options object (passed to <gridstack> via property binding) to a new one. Some options work, others don't.

Expected behavior

If I, for example, ask the component to have 2 rows where it was initialized with 3, it should reduce to 2. Currently it does not.

Thanks

you can still make a plain example showing the issue you are trying to use. Q: updating row after the fact might not be possible if your layout is too big already. What is your expectation here ?

My expectation is simple, declare the component in the page with an empty configuration and load it after a few seconds (after I fetch data from the backend). Usually all examples have a static configuration that's declared at component init.
Is there an example I can study to see if I did anything wrong here?
Thanks

when you say 'reduce to 2' you mean you are not seeing the grid with a minHeight of 2 rows in CSS (still showing as 3) as you still have no content. the grid.opts.minRow will be set to 2 after someone calls GridStack.updateOptions() - please verify that is true.

Since you are not posting a running example, NOR posting a picture it's really hard to tell what your issue is and I don't have time to debug your issue...

// gridstack Ng comp
  /** initial options for creation of the grid */
  @Input() public set options(o: GridStackOptions) {
    if (this._grid) {
      this._grid.updateOptions(o);
    } else {
      this._options = o;
    }
  }

// Gridstack
  public updateOptions(o: GridStackOptions): GridStack {
...
    if (o.row !== undefined) { opts.minRow = opts.maxRow = opts.row = o.row; }
    else {
      if (o.minRow !== undefined) opts.minRow = o.minRow;
      if (o.maxRow !== undefined) opts.maxRow = o.maxRow;
    }
}

You're right, it's hard to troubleshoot without a running example, do you have an angular stackblitz with the library? Or I can work in the demo project.
Thanks

call _updateContainerHeight() when changing opts.minRow

I ran into the same issue as described here, on 12.4.2. After increasing the row count, I can't move or resize a widget to occupy the new row. However the widgets do resize accordingly.

Screen.Recording.2026-02-25.at.17.07.54.mov

I don't have a running example either, but I do think I found what's causing this issue. Updating the row updates the values in the opts object within the GridStack class, but it doesn't update the maxRow field in GridStackEngine.

In fact, I don't see anywhere in either the main or engine class where this field is ever updated, except in the engine constructor.

Manually updating the maxRow field on the engine to the expected value (after also calling updateOptions) does produce the expected outcome.

Changing rows after init fix

Navigation Menu

Repository navigation

Changing rows after init doesn't work, component has to be re-created #3085

Subject of the issue

Your environment

Steps to reproduce

Expected behavior

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Changing rows after init doesn't work, component has to be re-created #3085

Description

Subject of the issue

Your environment

Steps to reproduce

Expected behavior

Activity

adumesny commented on Jul 3, 2025

john8329 commented on Jul 3, 2025

adumesny commented on Jul 3, 2025

john8329 commented on Jul 4, 2025

jdewaen commented on Feb 25, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions