Components: md-sidenav align="end" in child component causes horizontal scrolling

[zpydee]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

md-sidenav in child component shouldn't behave differently to md-sidenav in component with no child

What is the current behavior?

if you move md-sidenav with align="end" to a child component to the one housing md-sidenav-layout, horizontal scrolling is introduced when sidenav is closed.

What are the steps to reproduce?

THE FOLLOWING WORKS PERFECTLY:

<md-sidenav-layout fullscreen>
    <md-sidenav opened="true" align="end" #right style="width: 200px;">
        <button md-raised-buttton (click)="right.close()">CLOSE</button>
    </md-sidenav>
</md-sidenav-layout>

To check:

1. Click close button
2. Attempt to drag window horizontall. Nothing happens

NOW, WITH SIDENAV IN CHILD COMPONENT:

PARENT.HTML

<md-sidenav-layout fullscreen>
    <app-child></app-child>
</md-sidenav-layout>

CHILD.HTML

<md-sidenav opened="true" align="end" #right style="width: 200px;">
    <button md-raised-buttton (click)="right.close()">CLOSE</button>
</md-sidenav>

To simulate, repeat step above. Note that screen scrolls horizintally but the width of the md-sidenav.

What is the use-case or motivation for changing an existing behavior?

i utilize multiple sidebar and want to encapsulate them as standalone components

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

angular 2.2.3
material: alpha 11
os: osx 10.12.1
browser: chrome 55.0.2883.75 (64-bit) (but i get the same issue on any browser i've tried)

Is there anything else we should know?

nope, thanks.

[zpydee]

demo project for convenience

[devversion]

Need to ping @hansl here, who is the author of the md-sidenav.

Right now the md-sidenav-container automatically detects the sidenav and the content by using ng-content (See here)

The problem here is, that the sidenav, which has been declared as standalone component, isn't detected by ng-content and now lives in the md-sidenav-content div.

I feel like it will be difficult to detect what's supposed to be the sidenav across different components

[zpydee]

thanks for looking. from a modularity perspective, i feel its important to be able to isolate interactions with the sidenav in its own child component otherwise the md-sidenav-container component becomes bloated when you want to implement multiple sidebars.

obviously i'm not familiar with the inner workings, but as a user it would be even better if there was no need to have a md-sidenav-container at all...

[oailloud]

I had the same problem and just got it working by removing the fullscreen attribute of the md-sidenav-container (md-sidenav-layout for you apparently)

[mumumilk]

Had the same problem, got solved by giving the md-sidenav a position: fixed.

[GarryBrown]

The same problem, removing the fullscreen attribute doesn't help (how said @oailloud)
But sulution is the position: fixed . Thanks @mumumilk

[scriptsure]

@mumumilk thanks man worked perfect!!!