CODEWITHSUNDEEP
angular
Mayur Maed
Mayur Maed

Reputation: 21

The mat-menu always appears at page end

I implemented the mat-menu from angular material and the menu always appears at the page-end (code-below):

I have tried setting z-index and other css properties but the menu does not come where it originally should

HTML

<button mat-button [matMenuTriggerFor]="main_menu">My menu</button>

      <mat-menu #main_menu="matMenu">
        <ng-container *ngFor="let mainItem of objectKeys(my_menu)">
          <button mat-menu-item [matMenuTriggerFor]="sub_menu">{{ mainItem }}</button>
          <mat-menu #sub_menu="matMenu">
             <button *ngFor="let subItem of my_menu[mainItem]" mat-menu-item>{{ subItem }}</button>
          </mat-menu>
        </ng-container>
      </mat-menu>



@Input() objectKeys = Object.keys;
  @Input() my_menu = {
    'main1': ['sub1', 'sub2'],
    'main2': ['sub1', 'sub2', 'sub3'],
  };

I expect the menu to appear around the button when clicked

Upvotes: 2

Views: 2886

Answers (4)

joaopfg
joaopfg

Reputation: 1287

I was facing the issue. When relaunching ng serve, it worked.

Upvotes: 0

triddle
triddle

Reputation: 191

I solved this by setting an Angular Material default theme in angular.json.

"styles": ["./node_modules/@angular/material/prebuilt-themes/indigo-pink.css","projects/<project_name>/src/styles.css"]

Upvotes: 2

andromarina
andromarina

Reputation: 41

Faced similar issue.for me the solution was - adding @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; to styles.

Upvotes: 4

Md Rafee
Md Rafee

Reputation: 5530

There's no reason MatMenu to be appeared in different place. There must be some css issues like position: absolute working behind it. Better go the console and elements tab and manually tried to off and on those properties to find out your problem. To follow Example: stackblitz

Upvotes: 0

Related Questions