CODEWITHSUNDEEP
angular-materialangular-gridster2mat-sidenav
TmTron
TmTron

Reputation: 19381

Resizing issue with mat-side-nav and gridster2

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:

enter image description here

itemComponent.width 252

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

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:

Upvotes: 1

Views: 1753

Answers (1)

TmTron
TmTron

Reputation: 19381

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
}

Upvotes: 1

Related Questions