md-overlay-container for md-menu is misaligned in Angular 2 Material

Question

I'm using Angular 2 material to create an app and in that I'm trying to add a material menu in the md-sidenav-layout section. However on the trigger of the menu is shows up in a different section of the page.

app.component.ts- my main component which is bootstrapped

    @Component({
        selector: 'app-root',
        template: `
        <navbar></navbar>
        <sidenav #tests></sidenav>
        `
    })

sidenav.component.ts- sidenav component. I'm referring to https://github.com/angular/material2/blob/master/src/lib/menu/README.md to create the menu.

    @Component({
        selector: 'sidenav',
        template: `
            <md-sidenav-layout>
                <md-sidenav #start  [opened]="sidenavStatus()" (close)="reset()">
                    <md-card>
                        <p class="profile-name">Username</p>
                    </md-card>

                    <md-list class="sidenav-list">
                        <md-list-item> Add Steps </md-list-item>
                        <md-list-item> Add Sections </md-list-item>
                        <md-list-item> Add Fields </md-list-item>
                    </md-list>
                    <br>               
                </md-sidenav>

                //the actual content in the page
                <md-menu #menu="mdMenu">
                    <button md-menu-item> Refresh </button>
                    <button md-menu-item> Settings </button>
                    <button md-menu-item> Help </button>
                    <button md-menu-item disabled> Sign Out </button>
                </md-menu>
                <md-card class="step-card">
                    <md-card-title>Card with title
                        <md-icon>more_vert</md-icon>
                        //button which is used to trigger the menu
                        <button md-icon-button [md-menu-trigger-for]="menu">
                            <md-icon>more_vert</md-icon>
                        </button>                    
                    </md-card-title>   
                    <md-card-content>
                            <p>This is supporting text.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>
                    </md-card-content>
                </md-card>        
            </md-sidenav-layout>
        `,
        styleUrls: ['./app/sidenav/sidenav.component.css']
    })

On page render its creating a new div outside the app-root(the main component) with a transform css property which is offsetting the actual location of the menu.

Rendered DOM:

Rendered UI:

What am I missing? When I try to add the actual content which is supposed to be outside the sidenav, even that get offset to where sidenav ends.

Answer 1

To solve the issue of the dialogs or menus appearing below the content or the app area just import one of angular’s material pre-build themes or create your own.

prebuilt themes names

• deeppurple-amber.scss
• indigo-pink.scss
• pink-bluegrey.scss
• purple-green.scss

if you are using sass

import ‘~@angular/material/core/theming/prebuilt/[name-of-the-themes].scss';

This is how you create a theme

create a sass or scss file

@import '~@angular/material/core/theming/all-theme';
// Plus imports for other components in your app.

// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($candy-app-theme);

and include it in your styles.scss file

Example theme was taken from Angular Material docs https://material.angular.io/guide/theming

Similar question here Angular Material2 md-select dropdown appears at bottom of the page