Components: Sidenav: content area size not calculated properly with animation

[KlausHans]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The size of the content area is calculated correctly according to the width of the sidenav menu.

What is the current behavior?

The calculation is wrong. The margin-left value of the content area is inverted to the width defined in the animation.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-etpys5
(to see the issue you have to click a few times on the expand button)

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]

[mmalerba]

It looks like a change detection issue. It's not exactly ideal, but you can use the start and done handlers on the animation to start and stop a requestAnimationFrame ticker that will trigger the appropriate change detection: https://stackblitz.com/edit/angular-o5fjz1?file=app/app.component.ts

@crisbeto Any way you can think of that we can do this for people?

[crisbeto]

I'm not sure whether there's an efficient way to do it, apart from using a ResizeObserver which has pretty bad browser support. For these kinds of cases it might be better to make _updateContentMargins a part of the public API so people can trigger a recalculation manually.

[KlausHans]

With the latest Angular (Material) version the behavior changed slightly. But its still broken.
https://stackblitz.com/edit/angular-kzia2e
@angular/animations7.2.9
@angular/cdk7.3.5
@angular/common7.2.9
@angular/compiler7.2.9
@angular/core7.2.9
@angular/material7.3.5

[robert-king]

I'm facing a similar issue - I adjust the width of the side-nav from 200 to 79 pixels:

sidenav component sets its width internally with hostbinding:

@HostBinding('style.width') width = '200px';

  toggleCollapse() {
    this.collapse = !this.collapse;
    this.width = this.collapse ? '79px' : '200px'
  }

but mat-sidenav-content margin-left stays at 200px when the side-nav changes to 79px. It makes collapsing the side-nav redundant.

<mat-sidenav-container>
  <mat-sidenav
    #sidenav
    [autoSize]="true" <--- INVALID, NOT AN OPTION FOR MAT-SIDENAV
    [mode]="(isBarkMobile$ | async) ? 'over': 'side'"
    [opened]="sideNavOpen"
    [disableClose]="true"
    [fixedInViewport]="(isBarkMobile$ | async)"
    [fixedTopGap]="0"
    [fixedBottomGap]="0">
    <shared-sidenav (closeSideNav)="closeSideNavIfMobile()"> <-- WIDTH ADJUSTS 200 -> 79!!
    </shared-sidenav>
  </mat-sidenav>

  <mat-sidenav-content> <-- MARGIN-RIGHT STAYS AT 200PX and doesnt go to 79px
    <router-outlet></router-outlet>
    <div style="display: none">
      <!-- preload these icons -->
      <mat-icon svgIcon="close-2"></mat-icon>
      <mat-icon svgIcon="offline"></mat-icon>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

[robert-king]

Here's my temporary fix:

toggleCollapse() {
    this.collapse = !this.collapse;
    this.width = this.collapse ? '79px' : '200px'
    document.querySelector('.mat-drawer-content.mat-sidenav-content').style.marginLeft = this.width;
  }

[KlausHans]

Still broken.
https://stackblitz.com/edit/angular-rf4mmn

@angular/animations9.1.0
@angular/cdk9.2.0
@angular/common9.1.0
@angular/compiler9.1.0
@angular/core9.1.0
@angular/forms9.1.0
@angular/material9.2.0
@angular/platform-browser9.1.0
@angular/platform-browser-dynamic9.1.0
@angular/router9.1.0

[meblum]

Any updates on this?