Menu appears after md-card instead of over it.

Hi, guys!

In my opinion, this menu should appear over the md-card, just below the trigger button, right?

'use strict';

import { Component } from '@angular/core';

@Component({
    selector: 'tbv-test',
    template: `
    <md-toolbar color="primary">
        <button md-icon-button disableRipple [md-menu-trigger-for]="menu">
            <md-icon>more_vert</md-icon>
        </button>
        <md-menu #menu>
            <button md-menu-item> I shouldn't </button>
            <button md-menu-item> be here :'( </button>
        </md-menu>
    </md-toolbar>
    <md-card>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quibusdam laboriosam minus accusamus, possimus delectus quos, id autem repellendus. Facilis fuga earum accusamus aut totam nisi maxime adipisci, cum saepe.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quibusdam laboriosam minus accusamus, possimus delectus quos, id autem repellendus. Facilis fuga earum accusamus aut totam nisi maxime adipisci, cum saepe.</p>
    </md-card>
    `,
})
export class TestComponent {
    constructor() {}
}

I’m using Angular 2.0.0-rc.5 and material 2.0.0-alpha.7 on both Chrome and Edge.

[ivoviz]

@andregs Although I haven’t checked your code, I had a very similar issue. In my case I had to manually load core/overlay/overlay.css, otherwise every single element that used overlay was positioned way off, just like in your case. I might just overlooked it, but it should either be mentioned in the docs or make it load automatically somehow. Similar issue to #972 imo.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}