Components: mdMenu : x-position & y-position not working

Created on 12 Jan 2017  路  7Comments  路  Source: angular/components

Bug, feature request, or proposal:

Bug or missunderstanding of the doc ?

What is the expected behavior?

Set the position of the menu with y-position or x-position attribute

What is the current behavior?

None

What are the steps to reproduce?

Plunkr

What is the use-case or motivation for changing an existing behavior?

This behavior should works

Which versions of Angular, Material, OS, browsers are affected?

Material 2.0.0-beta.1
Chrome 55.0.2883.87 m (64-bit)
Windows 10

Is there anything else we should know?

P3

Most helpful comment

@kara I thought that 'position-x : below' meant under the button but like you said, it's more a matter of orientation (maybe it would be a better choice to name it 'direction' or 'orientation').

Can't wait for the next release ! Thx

All 7 comments

I have the same problem.
I would indeed expect the menu get rendered under the button (if mentioned y-position : below). This way, it would be possible to build a 'typical' menu with a button and a dropdown mark (triangle) and a menu expanding below when pressed

The x and y positioning seem to be working correctly. y-position: below places your menu in the direction going down as a dropdown. y-position="above" makes the menu dropup. Likewise x-position aligns the menu left (before) and right aligned (after). What seems to not be working is the overlapTrigger which determines if it will be positioned on top of your trigger button or not.

y-position="above" - Aligns menu to dropup
image

y-position="below" - Aligns menu to dropdown (default)
image

x-position="before" - Aligns menu to right
image

x-position="after" - Aligns menu to left (default)
image

@Robouste I'm not clear on what you're expecting to happen from saying "it should work". When I open your plunker, it does work as intended in that the bulk of the menu panel is oriented below the trigger (rather than above). "Below" is a measure of orientation, rather than a measure of "overlapping". If you are trying to get the panel to display below and not overlap the trigger, it sounds like you want the overlapTrigger property that will become available in our next release. As that is already implemented and in master, I'm closing the issue.

If you do have a bug with the existing positioning, please open a new issue with specific instructions on how to reproduce and the behavior you expected.

@kara I thought that 'position-x : below' meant under the button but like you said, it's more a matter of orientation (maybe it would be a better choice to name it 'direction' or 'orientation').

Can't wait for the next release ! Thx

@Robouste I agree with you position for orientation is very confuse

I wish the MenuPositionX were clearer that they were strings of before and after

I read the docs, couldn't figure out what they were, and found this thread for it. Should be more clear.

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Hiblton picture Hiblton  路  3Comments

theunreal picture theunreal  路  3Comments

vitaly-t picture vitaly-t  路  3Comments

crutchcorn picture crutchcorn  路  3Comments

MurhafSousli picture MurhafSousli  路  3Comments