Skip to content

Mat menu height gets shrinked when scrolled out of view #18168

Closed
@imrebudai

Description

@imrebudai

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When an opened menu is scrolled out of the view, and it's scrolled back to the view, then it should have the original height.

What is the current behavior?

When an opened menu is scrolled out of the view, and it's scrolled back to the view, then it loses it's original height and gets shrinked to the height of one menu-item.

What are the steps to reproduce?

  1. Use the mat-menu with reposition scroll strategy (that's the default)
  2. Open mat-menu
  3. If it's opened above the menu trigger then scroll down, if it's opened below then scroll up until you scroll the menu out of the view

Stackblitz example:
I used the original mat-menu example from the angular.material.io and just slightly modified the html by adding some extra content to make it scrollable.

Just open the link and see the menu trigger on the middle of the page and do the reproduction steps. Furthermore see the attached gif below.

https://stackblitz.com/edit/angular-rnvofb-2d2zsm?file=src%2Fapp%2Fmenu-overview-example.html

mat menu scrolling issue

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

To fix the issue mentioned above

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

@angular/material ~8.2.2

Is there anything else we should know?

Tested it in chrome.
Possible solution can be: (only checked it in browser console, but it worked)
Call the withGrowAfterOpen(true) on the position builder when the related overlay config is retrieved for the overlay. This overlay config instantiated inside the _getOverlayConfig() function in the menu.trigger.ts.

So it would look like this:

private _getOverlayConfig(): OverlayConfig {
    return new OverlayConfig({
      positionStrategy: this._overlay.position()
          .flexibleConnectedTo(this._element)
          .withLockedPosition()
          .withGrowAfterOpen(true) // this is newly added
          .withTransformOriginOn('.mat-menu-panel, .mat-mdc-menu-panel'),
      backdropClass: this.menu.backdropClass || 'cdk-overlay-transparent-backdrop',
      scrollStrategy: this._scrollStrategy(),
      direction: this._dir
    });
  }

My current temporary solution is setting the min height for the connected position overlay element (with class "cdk-overlay-connected-position-bounding-box") to equal with it's height after opening, but it's quite a hack as I get this element from the DOM with getElementsByClassName.

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/menu

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions