Components: Sidenav and fixed elements

[mozgor]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

fixed elements to be fixed without css tricks

What is the current behavior?

To keep elements fixed (such as toolbar on the top, floating buttons on on the bottom) I need to set height: 100% on html, body, main, and md-sidenav-container (and any other potential parents). I have to set overflow-y: auto on the md-sidenav-container too.

If any of those properties is omitted, then toolbar & floating buttons fixed property is now taken as absolute.

What are the steps to reproduce?

Just look this sample and try to fix the toolbar ; or jsut get an empty app with a sidenav and a toolbar. Unfortunately I can't provide any plunker (proxy doesn't allow it).

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

It seems to be a misfunction of the component and not the actual expected behavior. Plus, those css tricks I mentioned cause side-effets, especially on scroll event caption.

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

All I tested. From the alpha 10 to the current version, beta 2. I should have post this earlier, but I thought someone else would have find it. My bad.

Is there anything else we should know?

If this issue is known, please ignore this, but I couldn't find any related issue.

[amardeep]

https://material.angular.io/components/component/sidenav

Here, in the "Sidenav with a FAB" example, the fab scrolls with the text, instead of remaining at the fixed position.

[sebastianhaas]

+1
The best I could come up with is this, which is far from perfect.

[macjohnny]

Hey there
We came across the same issue.
According to https://bugs.chromium.org/p/chromium/issues/detail?id=20574 and https://github.com/w3c/csswg-drafts/issues/913 there seems to be a bug in the CSS specs when using a position: fixed element inside a container with a translate transform, e.g. transform: translate3d(10px,0,0).

Here in md-sidenav, the transform: translate3d() is added to the <md-sidenav-container> and the .mat-sidenav-content elements.

So far, the only workaround we have found is to overwrite the transform property to transform: initial !important, since we are not using the push mode of the sidenav.

I fixed the above plunkr example to work with angular 4, and astonishingly, the issue cannot be reproduced there anymore. http://plnkr.co/edit/tWIiaz5Mmtd3g5QhCZ4d?p=preview

[Splaktar]

This is a duplicate of https://github.com/angular/material2/issues/998

[kenji-1996]

A fix for having a fixed-bottom navbar
https://github.com/angular/material2/pull/6712#issuecomment-336342202

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}