1

When I toggle the Side-Nav, I wait for the response and then call gridster.resize():

 sideNavToggle() {
    this.sideNav.toggle().then(() => {
      this.gridster.resize();
    });
  }

Here is a full stack-blitz example.

Make sure to make the application window wide enough, so that gridster shows the desktop layout - or better Open the app in a new window.

Here is one example:
When I start the app the width of my gridster item tile is ~223 and it is displayed as expected.

When I now toggle the side-nav, the gridster item is resized correctly:

  • when I use the dev-tools I can see that the new width of the tile is 252
  • also the console log of the gridster resize callback shows that width of 252
  • But the width in the component is wrong: it is still 223 (see the text in the tile):

enter image description here

itemComponent.width 252

When I toggle the side-nav again to open it, the same happens:

  • the tile is correctly back to 223
  • but the text in the tile still shows the width of 252
  • it seems that the width in my tile always lags behind

enter image description here

Do you have any idea what I am missing?

Note: in my real application the tile contains a chart component which will auto-size based on it's parent div (which is in the tile). So it is important that that the dom-width/height in the tile is correct when the resize event has occurred.

Notes:

  • this also happens with the latest 8.x release of Angular, angular-gridster2 and angular-material: stackblitz example
Jeroen
  • 1,168
  • 1
  • 12
  • 24
TmTron
  • 17,012
  • 10
  • 94
  • 142

1 Answers1

1

A good way to handle this is to use the angular-resize-event library.
Then we don't even need the gridster itemResizeCallback event

Here is an updated stackblitz example that uses the resize-sensor

Just attach the resize directive to your container (see file tile.component.html): e.g.

<p (resized)="onResized($event)">..</p>

and in the callback resize your chart, canvas, etc. (see file tile.component.ts)

onResized(event: ResizedEvent) {
  // resize your chart, canvas
  // maybe use event.newWidth / event.newHeight when required
}
TmTron
  • 17,012
  • 10
  • 94
  • 142
  • in my case there is dahboard library created using angular girdster. when the side nave button clicked, girdster gird is not straching . how do i resolve that ? – Shameera Anuranga Dec 13 '19 at 09:25
  • @ShameeraAnuranga I don't know angular-gridster: This question is for angular-gridster2 - if you are using a different library, you should ask a new question. – TmTron Dec 13 '19 at 09:49
  • not a different library. I have created a dashboard with anglar-gridster2(8.2.0v). There is a mat-side-nav . when I clicked the side-nav button dashboard grid should risize, but thats not happen. do you have any idea about this ? – Shameera Anuranga Dec 13 '19 at 09:56
  • Then it should be the same as the stackblitz example above, right? And in the example, it is working as expected when you click the `Toggle sidenav..` button. – TmTron Dec 13 '19 at 10:05