Components: [mat-menu] New Position like xPosition="'center'" for mat-menu

Created on 26 Jan 2018  路  7Comments  路  Source: angular/components

Bug, feature request, or proposal:

Feature Request

What is the expected behavior?

xPosition should accept the paramter 'center' .
This new position will center the menu horizontally in relation to the trigger.

What is the current behavior?

xPosition only accepts the parameters 'before' or 'after'.

What are the steps to reproduce?

https://material.angular.io/components/menu/api

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

The component mat-menu becomes more flexible.

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

Angular: 5.2.2
Material: 5.1.0
TypeScript: 2.6.2

#### Is there anything else we should know?

Most helpful comment

@julianobrasil Looks good thanks!

Also there is a third option:

  1. Assign a selector for each mat-menu you need to change.
    Set/Override the margin and transform-origin for each mat-menu individually.

All 7 comments

Adding support for it is only a matter of passing in another value to the ConnectedPositionStrategy, but the issue is that supporting it deviates from the spec and may end up looking weird.

Ah too bad.

Here is an example with an arbitrary x-position https://play.google.com/store.
When you click on the "Google-Apps" button in the top right a dropdown menu appears.
That's basically what I want to achieve.

image

@MJomaa, it seems you want a kind of popover, which is not planned to be added to Material.

You have currently two options:

  1. Make your own using something like cdkOverlay
  2. use a third party component like the awesome @willshowell's satPopover

@julianobrasil Looks good thanks!

Also there is a third option:

  1. Assign a selector for each mat-menu you need to change.
    Set/Override the margin and transform-origin for each mat-menu individually.

I also need this kind of behavior and I will look into @MJomaa temporary solution.
I don't agree that this is a kind of custom popover...and the cdk overlay can be kind of overwhelming, especially if you just want to display a few simple menu elements.
So some options to tune the position a little further would be nice.

Closing as it was noted in an above comment, center positioning of a menu is not conformant to the spec.

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

alaawerfelli picture alaawerfelli  路  148Comments

maku picture maku  路  59Comments

MariovanZeist picture MariovanZeist  路  59Comments

kara picture kara  路  94Comments

jmcgoldrick picture jmcgoldrick  路  59Comments