Discussion :

[Skunka]

Bonsoir,
je me sert de Angular Material pour afficher un bouton affichant un submenu au clik mais quand je clique, le menu s'affiche sous tout le contenu de ma page web et non sus le bouton "DASHBOARD":


J'aimerais que le menu s'affiche directement sous le bouton "DASHBOARD".

Dans l'outils de développement, la div "cdk-overlay-container" affichant le menu sous place sous la balise <app-root> où se trouve le bouton:


Le code:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<mat-toolbar id="top-menu-container">
    <button mat-button [matMenuTriggerFor]="topMenu" id="top-menu">
        <h2 id="main-title">D A S H B O A R D<mat-icon>arrow_drop_down</mat-icon></h2>
 
    </button>
    <mat-menu #topMenu="matMenu" yPosition="below" id="top-menu-item-list">
        <button mat-menu-item class="top-menu-item">
            <mat-icon>add</mat-icon>
            Nouveau module
        </button>
        <button mat-menu-item class="top-menu-item">
            <mat-icon>build</mat-icon>
            Gestion module
        </button>
    </mat-menu>
</mat-toolbar>
<mat-toolbar id="left-menu">
    <a routerLink="/evenements"><div class="left-menu-button"><p class="left-menu-button-txt">Evénement</p></div></a>
    <a routerLink="/listes"><div class="left-menu-button"><p class="left-menu-button-txt">Liste</p></div></a>
    <a routerLink="/projets"><div class="left-menu-button"><p class="left-menu-button-txt">Projet</p></div></a>
    <a routerLink="/series"><div class="left-menu-button"><p class="left-menu-button-txt">Série</p></div></a>
 
</mat-toolbar>
<div class="main-content">
    <router-outlet></router-outlet>
</div>

Il est situé dans "app.component.html" qui est le point d'entré de mon projet.

Merci d'avance !