Search code examples
angularangular-materialangular7angular-flex-layout

mat-menu sizing problem at 1033 pixels; truncates data

I'm in an Angular 7 project using Material Design and FlexLayout

I can't figure out why the mat-menu behaves like that : When my window is greater that 1032 pixel width the mat-menu does not size according to its items and truncate contents.

Am I doing something wrong?

I have made a simple Stackblitz to show the issue : https://stackblitz.com/edit/mat-menu-issue20190102

Here's the problem at 1033 pixels

Solution

  • Finally found the problem. Its because my body had a fixed width of 980px and margin:0 auto (to make the website content centered).

    I ended up wrapping my inside a <div id="appContainer"> and applied the styles to this div :

    <body>
  <div id="appContainer">
    <app-root></app-root>
  </div>
</body>

#appContainer {
    height: 100%;
    margin: 0 auto;
    color:#444444;
    max-width: 980px;
    min-width: 400px;
}