Angular Incorrect Margin-Left Applied to Sidenav Content

Angular Incorrect Margin-Left Applied To Sidenav Content

Looks like I found the issue. Inside sidenav-group I had

<i class="material-icons" *ngIf="!displayBody">keyboard_arrow_down</i>
<i class="material-icons" *ngIf="displayBody">keyboard_arrow_up</i>

When I should have

<mat-icon mat-list-icon *ngIf="!displayBody">keyboard_arrow_down</mat-icon>
<mat-icon mat-list-icon *ngIf="displayBody">keyboard_arrow_up</mat-icon>

For some reason the <i> would sometimes insert extra space.

Collapsable mat-sidenav menu rezise content not working

I solved a similar problem in one of my apps before. I used ngClass and a boolean controlling both mat-sidenav width property and mat-sidenav-content margin-left property . Here is a stackblitz, i sliced out relevant part from that app.

https://stackblitz.com/edit/angular-mff93r

How to pin mat-toolbar and mat-sidenav and only have a scrollbar inside mat-sidenav-content?

This scroll is being applied to your body element. You may want to simply reset the margin and padding for the html and body elements:

body, html {
  padding: 0;
  margin: 0;
}

https://stackblitz.com/edit/angular-eddznu?file=src%2Fstyles.css

Angular2 material sidenav - changing rtl/ltr direction dynamically

Take a look at source code Dir directive

@Input('dir') _dir: LayoutDirection = 'ltr';

• https://github.com/angular/material2/blob/2.0.0-alpha.9/src/lib/core/rtl/dir.ts#L19-L43

As you can see you're changing _dir property instead of dir setter:

set dir(v: LayoutDirection) {
  let old = this._dir;
  this._dir = v;
  if (old != this._dir) {
    this.dirChange.emit(null);
  }
}

So i think your solution should be like:

view

<md-sidenav-layout fullscreen dir="ltr" #root="$implicit">

<select #langSelect (change)="changeLang(langSelect.value, root)">

component

changeLang(lang, root: Dir) {
  this.translate.use(lang);
  root.dir = lang == "fr" ? "rtl" : "ltr";
}

This way you can omit direction: string property on your component.

And one note:

translate: TranslateService; //it's redundant `private translate: TranslateService` does it
direction: string; // omit it

constructor(private translate: TranslateService) {
  this.direction = "ltr"; // omit it
  translate.addLangs(["en", "fr"]);
  translate.setDefaultLang('en');

  let browserLang = translate.getBrowserLang();
  translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
  this.translate = translate; // it's redundant
}

Here's your Plunker Example

If you think that this is the wrong decision then check this

• https://github.com/angular/material2/blob/2.0.0-alpha.9/src/demo-app/demo-app/demo-app.html#L42-L48

Hope this will help you!

---

Related Topics