0

I'm trying to use @Angular/Material, specifically for the header in my Angular 6 app.

I am basing it off of this example: Mat-Menu Example

My header component HTML looks like this: 

<header role="navigation">
  <div id="navbar">

    <a href="/dashboard" id="home"><mat-icon>home</mat-icon></a>
    <a id="profile" [matMenuTriggerFor]="menu"><mat-icon>person</mat-icon></a>

    <mat-menu #menu="matMenu" x-position="above">
      <button mat-menu-item (click)="switchAccounts()">
        <mat-icon>people</mat-icon>
        <span>Switch Account</span>
      </button>
      <button mat-menu-item (click)="editProfilePage()">
        <mat-icon>edit</mat-icon>
        <span>Edit Profile</span>
      </button>
      <button mat-menu-item (click)="logout()">
        <mat-icon>power_settings_new</mat-icon>
        <span>Log Out</span>
      </button>
    </mat-menu>

  </div>
</header>

Instead of being anchored to the the Profile Link and opening right by it, mat-menu opens and (div with class cdk-overlay-container) appends to the bottom left corner.

How can I keep the mat-menu at the top of the page right by the link that opened it?

Catherine Monroe
  • 153
  • 1
  • 3
  • 9

2 Answers2

3

I've had the same problem as you but I found an solution.
I noticed a warning in the debug window 'Could not find Angular Material core theme.'. So I added a random one and it solved the dropdown on the wrong side problem by mistake.
When you think about it it makes sense. Almost all of the look 'n' feel is embedded in the style but also layout behavioral. So try to add whatever material theme you want in the styles.css file and see if it works,
For example:
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

Sorry this answer might be to late but for future reference this might help someone.

EvenOdd
  • 31
  • 3
0
<a href="/dashboard" id="home"><mat-icon>home</mat-icon></a>
<a id="profile" [matMenuTriggerFor]="menu"><mat-icon>person</mat-icon></a>

<mat-menu #menu="matMenu" yPosition="above">
  <button mat-menu-item (click)="switchAccounts()">
    <mat-icon>people</mat-icon>
    <span>Switch Account</span>
  </button>
  <button mat-menu-item (click)="editProfilePage()">
    <mat-icon>edit</mat-icon>
    <span>Edit Profile</span>
  </button>
  <button mat-menu-item (click)="logout()">
    <mat-icon>power_settings_new</mat-icon>
    <span>Log Out</span>
  </button>
</mat-menu>
Ravi
  • 1
  • 2
  • 1
    As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 25 '22 at 10:12
  • Welcome to SO! Please don't post code-only answers but add a little textual explanation about how and why your approach works and what makes it different from the other answers given. You can find out more at our ["How to write a good answer"](https://stackoverflow.com/help/how-to-answer) page. – ahuemmer Dec 27 '22 at 08:12