Angular2: set md-fab button 'position: fixed' in internal component

Question

I am using the md-fab button from the original angular2 material structure. I want to set the md-fab button (to add a new object) position: fixed, but I want to put this button in the internal component inside md-sidenav-layout, but if I do so, it position: fixedwill not work,

Code above:

<div class="{{themeService.ActualTheme}}">
    <md-sidenav-layout class="full-height" fullscreen>

This class attribute is for application only. I also tried it without full-screen mode and set the “full-height” class md-sidenav-layoutto 100% height and absolute, but it doesn’t work.

First try ( position: fixednot working):   

        <button (click)="onPlusClickAction()" class="add-group-button" color="accent" md-fab>
            <md-icon class="md-24 plus-icon">add</md-icon>
        </button>

    </md-sidenav-layout>
</div>

Instead, the router-outletinternal component will be replaced (standard routing angular2).

md-fab- :

        <router-outlet></router-outlet>

    </md-sidenav-layout>

    <button (click)="onPlusClickAction()" class="add-group-button" color="accent" md-fab>
        <md-icon class="md-24 plus-icon">add</md-icon>
    </button>
</div>

, position: fixed, md-fab md-sidenav-layout, , , fab sidenav. z-index , fab .

- ?

!

Answer 1

, md-sidenav-layout transform: translate3d CSS.

:

. https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Material 2 , translate3d sidenav, : https://github.com/angular/material2/issues/998

. FAB , ( md-sidenav-layout), FAB Observable .

<md-sidenav-container>
    <md-sidenav #sidenav mode="side" class="app-sidenav">
        <md-nav-list>
            <a md-list-item routerLink="/">
                <span md-line>Home</span>
            </a>
    </md-nav-list>
  </md-sidenav>
    <md-toolbar color="primary">
        <button md-icon-button (click)="sidenav.toggle()">
            <md-icon class="icon-40">menu</md-icon>
        </button>
        <span>Angular Material 2 Sidenav with FAB</span>
    </md-toolbar>
  <router-outlet></router-outlet>
</md-sidenav-container>
<router-outlet name="fab"></router-outlet> 

FAB

export class FabService {

  private actionSource = new Subject<string>();
  public actionStream = this.actionSource.asObservable();

  public broadcastAction(action: string) {
      this.actionSource.next(action);
  }
}

FAB

@Component({
    template: '<button md-fab class="fab" (click)="actionHandler()"><md-icon>add</md-icon></button>',
    styles: [`
        button.fab {
            position: fixed;
            bottom: 12px;
            right: 12px;
        }
    `]
})
export class FabComponent {

    constructor(private fabService: FabService) { }

    actionHandler() {
        this.fabService.broadcastAction('click');
    }  
}

export class MainComponent implements OnInit, OnDestroy {
  private subscription: Subscription;

  constructor(private fabService: FabService)  { }

    ngOnInit(): void {
    this.subscription = this.fabService.actionStream.subscribe(event => this.events.push(event));
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }  
}

const routes: Routes = [
    { path: '', children: [
        { path: '', component: MainComponent},
        { path: '', component: FabComponent, outlet: 'fab' }
    ]}

: http://plnkr.co/edit/GLFWfdy2JSXNKefhuNLA?p=preview

Answer 2

. :

1:

display: flex md-sidenav md-sidenav-content. : http://plnkr.co/edit/VItn3Y2AaTzpzIykTTyH?p=preview

2:

, transform: translate3d, :

.md-sidenav-content {
    transform: none !important;
}

: , transform: translate3d(0,0,0). SO: fooobar.com/questions/90334/...