CODEWITHSUNDEEP
angularangular-materialmedia-queries
bob.mazzo
bob.mazzo

Reputation: 5637

Issue style Angular Material mat-menu in IE11

So we are using Angular 7.2 with Materials 7.2.1, and we are trying to fix a css-related issue where we add fxLayout to the mat-menu.

This adds horizonal and vertical scrollbars, which makes it unusable (see screenshots).

My question is main around how I can modify the flexbox styles in scss to handle this ie11 issue :

i.e. perhaps using a media query:

 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    // IE10+ CSS here
}

Here's a snippet from our menubar html template :

<button mat-button [matMenuTriggerFor]="adminMenu" *ngIf="userRoles.admin.CanView">Admin
    <mat-icon svgIcon="down" style ="vertical-align: top;height: 20px; width: 20px;"class="caret">arrow_drop_down</mat-icon>
</button>

<mat-menu #adminMenu="matMenu" [overlapTrigger]="false" class="mega-menu app-dropdown">
    <div fxLayout="column wrap">
        <div fxFlex class="p-1">
            <a mat-menu-item [matMenuTriggerFor]="adminManagementMenu" >Management</a>
            <a mat-menu-item [matMenuTriggerFor]="adminMonitoringMenu" >Monitoring</a>
            <a mat-menu-item [matMenuTriggerFor]="adminConfigurationMenu" >Configuration</a>
            <a mat-menu-item routerLink="/activation">Activation</a>
        </div>
    </div>
</mat-menu>

and an example of the generated html for the management menu item (copied from Chrome inspector):

<div class="mat-menu-panel ng-trigger-transformMenu ng-tns-c11-26 mega-menu app-dropdown mat-menu-after mat-menu-below ng-star-inserted mat-elevation-z4" role="menu" tabindex="-1" ng-reflect-klass="mat-menu-panel" ng-reflect-ng-class="[object Object]" style="transform-origin: left top 0px;"><div class="mat-menu-content"><div _ngcontent-c10="" fxlayout="column wrap" ng-reflect-layout="column wrap" style="flex-flow: column wrap; box-sizing: border-box; display: flex;"><div _ngcontent-c10="" class="p-1" fxflex="" ng-reflect-flex="" style="flex: 1 1 1e-09px; box-sizing: border-box;">
<a _ngcontent-c10="" aria-haspopup="true" class="mat-menu-item mat-menu-item-submenu-trigger ng-star-inserted mat-menu-item-highlighted" mat-menu-item="" ng-reflect-menu="[object Object]" role="menuitem" tabindex="0" aria-disabled="false" aria-expanded="true">
Management
<div class="mat-menu-ripple mat-ripple" matripple="" ng-reflect-disabled="false" ng-reflect-trigger=""></div></a>

materials dropdown menu

mat-menu content div style

My question is main around what I can do in our scss file to handle some of these special ie1 related css issues:

i.e. perhaps using a media query:

 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    // IE10+ CSS here
}

Upvotes: 0

Views: 1477

Answers (1)

bob.mazzo
bob.mazzo

Reputation: 5637

We just removed fxLayout and fxFlex from the div and it works fine in IE:

<mat-menu #adminMenu="matMenu" [overlapTrigger]="false" class="mega-menu app-dropdown">
    <div>
        <div class="p-1">
            <a mat-menu-item [matMenuTriggerFor]="adminManagementMenu" >Management</a>
            <a mat-menu-item [matMenuTriggerFor]="adminMonitoringMenu" >Monitoring</a>
            <a mat-menu-item [matMenuTriggerFor]="adminConfigurationMenu" >Configuration</a>
            <a mat-menu-item routerLink="/activation">Activation</a>
        </div>
    </div>
</mat-menu>

Upvotes: 1

Related Questions