J'ai essayé de créer du Matériau angulaire Navigation côté fixe , mais je suis confronté à un conflit sur mes projets, mon problème est l'en-tête de la barre latérale non résolu, j'ai ajouté des détails sur le contenu et fait défiler le contenu, puis l'en-tête est masqué,
comment puis-je résoudre ce problème aidez-moi à résoudre celui-ci.
Merci.
Mon code
sidenav-fixed-example.html .example-container {
position: absolute;
top: 60px;
bottom: 60px; height: 100%;
left: 0;
right: 0;
}
.example-sidenav {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
background: rgba(255, 0, 0, 0.5);
}
.example-header {
position: fixed;
top: 0;
left: 0;
right: 0;
}
.example-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
<mat-toolbar class="example-header">Header</mat-toolbar>
<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav mode="side" opened class="example-sidenav">
<mat-nav-list>
<!-- Sidebar -->
<ul class="sidebar navbar-nav" >
<div class=" fixed-search " >
<div class="sidebar-date-and-time">
<span class="side-mnu" routerLink='/home'>
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight"><i class="fas fa-home"></i></div>
<div class="p-2 bd-highlight txt-sm">Home</div>
</div>
</span>
<span class="side-mnu-active" routerLink='/categories'>
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight"><i class="fas fa-clipboard-list"></i></div>
<div class="p-2 bd-highlight txt-sm">Categories</div>
</div>
</span>
<span class="side-mnu" routerLink='/customerdetails'>
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight"><i class="fas fa-users"></i></div>
<div class="p-2 bd-highlight txt-sm ">Customers</div>
</div>
</span>
<span class="side-mnu" routerLink='/orderdetails'>
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight"><i class="fas fa-shopping-bag"></i></div>
<div class="p-2 bd-highlight txt-sm">Orders</div>
</div>
</span>
<span class="side-mnu">
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight"><i class="fas fa-clipboard-check"></i></div>
<div class="p-2 bd-highlight txt-sm">Sales Items</div>
</div>
</span>
<span class="side-mnu">
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight"><i class="fas fa-bullhorn"></i></div>
<div class="p-2 bd-highlight txt-sm">Announcements</div>
</div>
</span>
</div>
</div>
<!--side bar-->
</ul>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content >
Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.
</mat-sidenav-content>
</mat-sidenav-container>
<mat-toolbar class="example-footer">Footer</mat-toolbar>
3 Réponses :
Vous devez définir la propriété fixedInViewPort.
[fixedInViewport] = "true"
<mat-sidenav #sidenav mode="side" opened class="example-sidenav" [fixedInViewport]="true" >
Salut, Merci pour la solution mais je veux corriger l'en-tête, regardez mon code stackblitz.com/edit/angular- khnxwz
Donnez la valeur z-index comme 2 pour la classe example-header
.example-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2;
}
p >
Comme indiqué par @Deepu dans sa réponse, l'ajout de z-index: 2 garantira que l ' en-tête reste au-dessus du sidenav .
Cependant, cela créera un problème si les liens dans sidenav sont plus que ce qu'il peut accueillir. Donc, calculer la hauteur du sidenav est un meilleur choix ainsi que définir le z-index .
Pour y parvenir, il suffit d'ajouter height: calc (100% -120px); dans la classe .example-container . Je déduis 120px de la hauteur de 100% car c'est la somme de la hauteur de l'en-tête et de la hauteur du pied de page.
Voici la démo de stackblitz et la lien de code .