angular / angular/components

feat(Menu): Option to have it the same width as the trigger

Open
#30,862 0 comments 3 reactions 0 assignees View on GitHub
area: cdk/menu feature P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Feature Description

A possibility to have the https://material.angular.io/cdk/menu/overview take over the width of the container that triggers it.
As an example the grey area should span the full width of the red in the following example:

Image

Currently it seems that you have to provide a fixed width in px. Otherwise it does not work. But you don't always know the exact with of the 'trigger'.

There's an example here: https://vbqdncww.stackblitz.io

In [issue 26336](https://github.com/angular/components/issues/26336) it seems that they are overriding MAT_SELECT_CONFIG to set a `min-width: min-content;`, but have not gotten that to work yet.

### Use Case

It would enable a more consistent styling.

Contributor guide

Open the contributing guide

Research direction

Start with the Angular CDK menu overview and the StackBlitz example to reproduce the current sizing behavior; issue 26336 provides related context about menu width configuration. Done means the menu can take the trigger container's width without requiring a fixed pixel width, with the behavior demonstrated in an appropriate example or test.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.