web-dev-qa-db-fra.com

Angular Mat-tiroir mat en flex pleine hauteur, débordement de contenu automatique

Hier, j'ai rencontré un problème CSS qui semble être lié à mat-drawer et angulaires router-outlet. J'ai une page complète flexbox avec deux enfants. A mat-toolbar en haut et un composant personnalisé app-sidenav au fond. Cela fonctionne très bien et l'app-sidenav remplit le reste de la page car le flexbox est extensible. Jetez un œil à ce paramètre simplifié avant de continuer:

<div class="flex">
  <mat-toolbar></mat-toolbar>
  <app-sidenav></app-sidenav>
</div>

Le CSS associé est

.flex { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: stretch; }
mat-toolbar { flex: 0 0 auto; }
app-sidenav { flex: 1 1 0; }

Dans le composant app-sidenav , j'ai maintenant le modèle suivant

<mat-drawer-container>
  <mat-drawer></mat-drawer>
  <mat-drawer-content>
    <main><router-outlet></router-outlet></main>
  </mat-drawer-content>
</mat-drawer-container>

Et les styles associés sont

mat-drawer-container, mat-drawer-content { display: block; height: 100%; }
main { height: 100%; overflow-y: auto; }

Cela fonctionne bien et la hauteur est appropriée, sauf s'il n'y a pas de contenu plus grand que le app-sidenav la taille. La barre de défilement apparaît sur le composant externe flexbox et non sur la balise main-. J'ai également testé !important aux hauteurs et aussi 100vh mais sans succès. Alors, comment puis-je obtenir le overflow-y à la balise principale qui fonctionne?

Je suis à peu près sûr qu'il y a simplement un truc, mais je ne peux pas le savoir. Merci de votre aide. À votre santé!

Éditer:

J'ai fait un stackblitz pour ce problème. Lorsque vous accédez au composant ciao, vous voyez que la barre de défilement apparaît à la racine du document et non dans la balise principale.

cssangularflexboxangular-materialangular-router
4
Felix Lemke

En plus de la solution de travail de @ Sakkeer, j'ai trouvé un autre moyen sans pirater l'attribut position mais en utilisant flex. Ajoutez simplement (et non remplacez) les règles CSS suivantes aux styles existants.

app-sidenav { display: flex; }
mat-drawer-container { flex: 1 1 auto; }
6
Felix Lemke

Essayez ceci pour la classe css principale

main { 
  position: absolute;
  right: 0px;
  left: 0px;
  bottom: 0px;
  top: 0px; 
}
2
Sakkeer A
     <mat-drawer-container autosize style="position: absolute;right: 0px;left: 0px;bottom: 0px;top: 0px;">
        <mat-drawer #drawer mode="side" class="toolbar">
            <app-sidenav></app-sidenav>
        </mat-drawer>
        <router-outlet></router-outlet>
     </mat-drawer-container>

Le code ci-dessus a juste fonctionné pour moi, lorsque je mets le style directement et utilise la taille automatique afin que le conteneur de tiroir de tapis ne se chevauche pas sur la page du routeur.

1
Vijender Reddy Chintalapudi