Menu appears after md-card instead of over it.

[andregs]

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.

[kara]

@andregs It looks like your markup might not be right. The menu trigger expects an MdMenu instance, not the element. When you use #menu alone, you're just linking to the element. Can you try the following?

<md-menu #menu="mdMenu">
   <button md-menu-item> I shouldn't </button>
   <button md-menu-item> be here :'( </button>
</md-menu>

[andregs]

Thanks for the explanation but the issue still persists.

[aminebizid]

Look if you have an overlay div at the end of body

[kara]

I can't seem to reproduce this. Can you verify that you're following the instructions in the README and there are no errors in the console? An example plunker would expedite this.

[andregs]

I couldn't create a working plunker, but I created this tiny project so you can reproduce the issue:

menu-issue.zip

Just type npm install && npm run dev to start the server and browse to localhost:3000

[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.

[andregs]

I was facing #972 too - thanks for your tip! To sum up:

• Loading core/style/core.css solves the ripple problem in Weird ripple effect #972.
• Loading core/overlay/overlay.css solves this menu issue.

[kara]

Ah, we forgot to include that in the README. Added an issue to update the docs, but it doesn't look like a bug, so I'm closing this one:

#989

[angular-automatic-lock-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.}