mat-menu-item width

[DerHerrGammler]

Feature Description

I would like to set the width of the mat-menu-item to the same with as the button wich opens the menu.

Use Case

I have a menu and a larger button open button. It would look so much better if the mat-menu-item has the same width as the button. Actually there is no simple option.

[crisbeto]

You should be able to override the default styles from Material.

[DerHerrGammler]

I can override it but if the open button hase a wide of 100% of the parrent element, then there is no simple option for setting the same 100% to the mat-menu or the mat-menu-item.

[nlappe]

@DerHerrGammler i had a similar issue and it took about a day to find a solution. i had to cheat a bit and have thrown the mat-menu idea completely overboard. The problem with the menu seems to be, that it is opened in a CDK overlay and therefore has no direct reference to the button width (at least for Angular and Material 9). What i did is create a mat-select INSIDE the button. give both a width of 100% and open it on click. Its a bit quirky i know, but works like a charm. Depending on your needs this may or may not be a valid solution.

Also, please note that this opens the selection ON the button - if you want your button to be visible all the time during the selection, you may need to play around with the positioning.

component.html

    <button
      mat-stroked-button
      class="w-100"
      color="accent"
      (click)="matSelect.open()"
    >
      <mat-select
        #matSelect
        placeholder="Sort"
        i18n-placeholder="placeholder for sort dropdown"
        class="w-100 center-content no-dropdown-arrow"
      >
        <mat-option value="123">123</mat-option>
      </mat-select>
    </button>

styles.scss (has to be global)

.no-dropdown-arrow {
  .mat-select-trigger .mat-select-arrow-wrapper {
    visibility: hidden;
  }
}

i hope i could help you a bit :)

[SteveRusin]

Here is my solution stack blitz link

The idea is to read matMenuTriggerFor clientWidth, pass it to the menu itself as matMenuTriggerData, and bind it to the wrapper width

Hope it's helpful

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[ngPati]

Here is my solution stack blitz link

The idea is to read matMenuTriggerFor clientWidth, pass it to the menu itself as matMenuTriggerData, and bind it to the wrapper width

Hope it's helpful

this solution is perfect.. you can provide data to the template. that's the easy way to set the height! thanks!

this issue can be closed in my opinion. @SteveRusin provided a clean solution without messing with DOM etc.