web-dev-qa-db-fra.com

Md-toolbar peut-il être fixé en haut lorsque vous vous trouvez dans md-sidenav-layout?

Je me bats vraiment ici. Nous utilisons md-sidenav-layout et nous ne parvenons pas à trouver un moyen de corriger la barre d'outils md en haut de la page:

|--------------------------------|
|   <------ md-toolbar ------->  |       <- fix this so content scrolls under
|--------------------------------|
|                               ^|
|           scrollable           |
|                               v|
----------------------------------

En raison de la façon dont md-sidenav-layout semble se réparer tout seul, ajouter

style: fixed

à la barre d'outils md ne le répare pas - en fait, rien ne semble le faire!

Toute aide appréciée.

angularangular-material2
8
user3707

Pour ceux qui sont aux prises avec ce problème, la raison pour laquelle c'est difficile est que md-sidenav-layout et md-sidenav-content spécifient tous les deux

transform: translate3d(0,0,0)

Cela réinitialise le système de coordonnées pour les éléments enfants. Ceci est un problème connu ou une considération liée à l'utilisation de transform3d. L’alternative que nous avons proposée était de placer la barre d’outils md en dehors de la structure md-sidenav comme ceci:

<div style="position: fixed; width: 100%">
  <md-toolbar>...</md-toolbar>
</div>
<md-sidenav-layout style="top: 64px !important">...</md-sidenav-layout>

Faire ce qui précède obtient l'effet requis d'une barre d'outils md fixe avec une disposition en plein écran.

Voir ceci SO pour plus d'informations sur le problème corrigé/translate3d: 'transform3d' ne fonctionne pas avec la position: fixed children

3
user3707

Utilisez ceci:

<md-toolbar color="primary" layout="row" style="position: fixed;">
</md-toolbar>
<md-sidenav-container fullscreen>
</md-sidenav>

css:

.mat-toolbar.mat-primary{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9;
}
3
Deepak swain