Components: mat-menu doesn't try to return to its original height on window resize

Created on 5 Jun 2018  路  8Comments  路  Source: angular/components

Bug, feature request, or proposal:

bug

What is the expected behavior?

Menu shouldn't get unnecessarily shrinked after resizing window to height smaller than menu's content height and then back.

What is the current behavior?

Menu's size (height) remains limited by the former window size, even though the window's height is larger than menu's content again.

What are the steps to reproduce?

It can be easily reproduced on the official menu example from docs. https://stackblitz.com/angular/vrrbgbpjore

  1. Open the menu in provided example
  2. while menu is still open, resize browser's height so the menu's container needs to reduce its height
  3. enlarge the browser window again
  4. the keeps its reduced height

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

Albeit it's kind of corner-case, it may get menu into unusable state and re-opening the menu doesn't solve the issue.

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

Tried chrome and firefox and both behaved the same way.

Is there anything else we should know?

For some reason it doesn't happen every time. Sometimes I can resize the window however I want and it still works fine, sometimes it shrinks and stays shrinks on every resize.

image
image
image

materiamenu

Most helpful comment

Ok, no matter what I do, I'm not able to reproduce it on Chrome on my machine. But I was able to easily reproduce it on Firefox (also, notice an awkward focus outline when the menu is opened):

image

All 8 comments

I've tried your stackblitz demo on Chrome 66.0.3359.181 and also 67.0.3396.62 (64 bits). I could not reproduce it. I'm using a Windows 10 machine. Any specificity?

image

I am on 66.0.3359.139 Arch Linux (64-bit), but my colleagues were able reproduce it on both Windows 10 and Mac OS machines as well. We just noticed it gets fixed when you resize the window so much that the menu disappears. Could you try to resize the window only so the scrollbar appears and resize the window back to the original size? Other than that we are doing the same thing as you in your screencap. We'll also provide screencap in a moment.

Here's a reproduction video, Chrome 66.0.3359.181 Win10:
ezgif-4-22efdfbdfd
I'd like to point out, that once the menu is completely wiped by the resize, it fixes itself even when it's closed and reopened.

Ok, no matter what I do, I'm not able to reproduce it on Chrome on my machine. But I was able to easily reproduce it on Firefox (also, notice an awkward focus outline when the menu is opened):

image

I Have same issue. if any solution is exist then please help.

::ng-deep .cdk-overlay-connected-position-bounding-box {
min-height: 300px; // or whatever min height you need
}

This was fixed in master a while ago. Closing.

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

3mp3ri0r picture 3mp3ri0r  路  3Comments

constantinlucian picture constantinlucian  路  3Comments

dzrust picture dzrust  路  3Comments

kara picture kara  路  3Comments

vitaly-t picture vitaly-t  路  3Comments