md-menu does not appear next to attached element and menu anchor links do not route

[mLaird]

My app uses Angular 2.0.1 and Angular Material 2.0.0-alpha.8-2. Per md-menu docs, I have attached a menu dropdown to a button in the md-toolbar header. This header, a router-outlet link and a footer are the 3 elements in the AppComponent. Problem #1: When the button is clicked, the test menu appears, but it is below the footer, instead of being a dropdown from the button. I have tried x and y position with no results. The dropdown contains anchor links to route to pages. Problem #2: When the anchor links are clicked, the dropdown disappears, but no routing to a new page occurs. These anchor links are also in the toolbar for test purposes, and the links and the router work correctly in the toolbar - outside the menu. Here is relevant code.

<button md-button [md-menu-trigger-for]="menu">POST
<md-menu x-position="after" #menu="mdMenu">
Home
Rent an apartment
RefreshTest

Home
Rent apartment

others, etc.

TERMS
PRIVACY
others, etc.

[vinagreti]

Is this a bug?
Can ou provide a plunker to show this case?
I think you should post this as a question in stackoverflow and not here because issues are meant to be use for bug reporting and feature discussion and your case may be a wrong use of the modules.
The only way we cold know is with a plunker.

[mLaird]

This is a bug somewhere - either in the code or in the documentation. My
code is copied from the docs. My systemjs.config, app.component,
app.module, and app.routing are copied from Angular documentation. The
only unique code is the code I posted. The problem is a bug that affects
that the posted code or is in the docs / instructions for creating that
code. Everything else works.

Plunkers are very complicated and time consuming. They never work from
copied code because of bizarre set ups required by plunker.

On Fri, Sep 30, 2016 at 1:16 PM, Bruno da Silva joão <
notifications@github.com> wrote:

Is this a bug?
Can ou provide a plunker to show this case?
I think you should post this as a question in stackoverflow and not here
because issues are meant to be use for bug reporting and feature discussion
and your case may be a wrong use of the modules.
The only way we cold know is with a plunker.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#1387 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADDSbz_pobcgwXjs5Xmkw99gs_nlx2ycks5qvUPggaJpZM4KLS8q
.

Mike Laird

12 Arbor Creek Drive, Pittsford, New York 14534
mlaird@alum.mit.edu

". . . remembering on both sides that civility is not a sign of weakness,
and sincerity is always subject to proof. Let us never negotiate out of
fear, but let us never fear to negotiate." - John F. Kennedy

[rbostock]

Here is one I created that I think demonstrates the problem

https://plnkr.co/PEpSF37IIyOgHV8DVhGN

[mLaird]

Yes, that's it. When you click on rbostock's gray circle in the top right
of the toolbar, the menu does not drop down from the Application Name
element. Instead, it appears at the bottom of the card. Further, when you
click on a menu entry, it just disappears. No routing to a new page
occurs. The fault is somewhere in Angular2-material code.

Thank you, rbostock.

On Fri, Sep 30, 2016 at 7:24 PM, rbostock notifications@github.com wrote:

Here is one I created that I think demonstrates the problem

https://plnkr.co/PEpSF37IIyOgHV8DVhGN

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#1387 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADDSby8vIlRac12JGEEu-3u9vJAQrZGXks5qvZoXgaJpZM4KLS8q
.

Mike Laird

12 Arbor Creek Drive, Pittsford, New York 14534
mlaird@alum.mit.edu

". . . remembering on both sides that civility is not a sign of weakness,
and sincerity is always subject to proof. Let us never negotiate out of
fear, but let us never fear to negotiate." - John F. Kennedy

[rbostock]

OK, I figured out my positioning problem. The style class "md-overlay-container" was undefined because the styling wasn't specified, resulting in the correct css file not being included. I've updated the plunkr to include a pre-built theme as per the theming doc (see line 8 of index.html). I guess this wasn't necessary in the previous release.

@mLaird: I can't comment on the routing problem, because this example just uses the button (click) method.

[mLaird]

In your plunker from 3 days ago, I am still seeing the menu at the bottom of the card, and not attached to the Application Name element in the toolbar. Also, if the behavior can somehow be fixed with something like your line 8 in index.html, (<script src="https://unpkg.com/zone.js/dist/zone.js"></script>, then the bug is in the documentation. It has no mention of unpkg.com. Lastly, alpha.9 is released. I have not tried it yet, but the changelog makes no mention of fixes to md-menu. As far as I can tell, this is still a bug for md-menu.

[vinagreti]

@mLaird I've updated the plunker. You can see it here.

Look the style.css file where we import the pre-built theme.

Read the docs/mtheming.md for more info. Also, look the PR #1385 to learn how to theming your custom components.

[rbostock]

Sorry, forgot to freeze the plunk. I think you might not have been able to see the line

in the index.html.

In my project, I instead put
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
in my styles.css (I'm using angular-cli)

[vinagreti]

@rbostock I think that using angular-cli you should place it in angular-cli.json apps.styles list. If you put that in your index.html it wold not be bundled and you will ending up having to load the bundle and the theme file instead of loading only the bundle.. I can be wrong, but I've read it in some place.
So, for those who are using angular-cli, I think angular-cli.json is the right place. For those who are not using angular-cli, the style.css is the right place, because that way you can concatenate and minify the style and have only one bundle file.
I do not recommend you to put it in the index.html file for the reason I pointed in the first paragraph.

[jelbourn]

Sounds like this was caused by missing core styles, now documented in https://github.com/angular/material2/blob/master/docs/theming.md

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