CODEWITHSUNDEEP
csssassangular-materialangular-material-6angular-material-7
Saurabh Kumar
Saurabh Kumar

Reputation: 16669

Put traingle on top of mat menu

I have my menu as follows. how i can put a triangle upwards to my dropdown menu.

  <button mat-icon-button [matMenuTriggerFor]="appMenu">
    <mat-icon>arrow_drop_down</mat-icon>
  </button>

  <mat-menu #appMenu="matMenu">
    <button mat-menu-item [matMenuTriggerFor]="subMenu"><span translate="">header.menu.language</span></button>
  </mat-menu>

  <mat-menu #subMenu="matMenu">
    <button mat-menu-item *ngFor="let language of languages" (click)="setLanguage(language)">{{ language }}</button>
  </mat-menu>

Current look

enter image description here

I want

enter image description here

i added the following css and than enclosed mat-menu inside the div with the css but not working.

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;

  border-bottom: 5px solid black;
}

Upvotes: 2

Views: 9060

Answers (3)

H S W
H S W

Reputation: 7139

It can be done as follow:

General solution:

::ng-deep .cdk-overlay-container {
    max-width: none !important;
    margin-top: 5px;

    &::after {
        top: -5px;
        left: 20px;
        width: 0;
        height: 0;
        content: '';
        position: absolute;
        border-left: 0.7rem solid transparent;
        border-right: 0.7rem solid transparent;
        border-bottom: 0.7rem solid white;
    }
}

Solution for mat-menu with specific class: here tse-menu is the class of the menu on which I apply the traingle

::ng-deep .cdk-overlay-container .tse-menu {
    max-width: none !important;
    margin-top: 5px;

    &::after {
        top: -5px;
        left: 20px;
        width: 0;
        height: 0;
        content: '';
        position: absolute;
        border-left: 0.7rem solid transparent;
        border-right: 0.7rem solid transparent;
        border-bottom: 0.7rem solid white;
    }
}

Upvotes: 0

Awais
Awais

Reputation: 4912

Actually you can make that triangle but the point is mat-menu open on random position according to the view-port height so if you add that point and when you resize window or on tab or on small mac devices it open upward and your point is meaning less in that case. In short you cant bound mat-menu to open every time at bottom so that the arrow point up as you desire.

The best solution is try to use mat-menu with default styles.

Upvotes: 0

Yudiz Solutions
Yudiz Solutions

Reputation: 4459

Update the code

.submenu                            { position: relative;}
.submenu:after                      { position: absolute; content: ''; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid black; left: 20px; bottom: 110%; }
<button mat-icon-button [matMenuTriggerFor]="appMenu">
    <mat-icon>arrow_drop_down</mat-icon>
  </button>

  <mat-menu #appMenu="matMenu">
    <button mat-menu-item [matMenuTriggerFor]="subMenu" class="submenu"><span translate="">header.menu.language</span></button>
  </mat-menu>

  <mat-menu #subMenu="matMenu">
    <button mat-menu-item *ngFor="let language of languages" (click)="setLanguage(language)" class="submenu" >{{ language }}</button>
  </mat-menu>

Upvotes: 1

Related Questions