How to remove Angular Material Design Menu Box Scroll Bars

Question

I have a menu item in the top-right corner of my web app, and the code is below. Problem is, it's wide, and instead of stretching, it just adds a scrollbar to the menu and I tried a bunch of css to fix it but can't seem to figure it out.

UPDATE: I've added overflow: hidden !important; as suggested in one of the answers, and that removed the scrollbar, but now it isn't wide enough and so I can't access all the buttons. Tried width: 800px !important with the overflow, but it didn't change the width.

<button md-fab [md-menu-trigger-for]="settings">
  <md-icon>settings</md-icon>
</button>

<md-menu class="menu-overflow-hidden" x-position="before" #settings="mdMenu">
  <div style="display: flex; flex-direction: row; text-align: center">
    <div style="flex: 1; padding: 24px">
      <label>Left Side</label>
      <button md-menu-item routerLink=""> Option 1 </button>
      <button md-menu-item routerLink=""> Option 2 </button>
    </div>
    <div style="flex: 1; padding: 24px">
      <label>Right Side</label>
      <button md-menu-item routerLink=""> Option 3 </button>
      <button md-menu-item routerLink=""> Sign Out </button>
    </div>
  </div>
</md-menu>

style.css

.menu-overflow-hidden {
  overflow: hidden !important;
}

You should have attached the CSS too. But I'll take a punt at overflow, overflow-x, or overflow-y. But I do see something indicating flexbox too. See here's a [guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) to that. — JGFMK, Jul 23 '17 at 16:50
Oh, the css was just inline, somethign like `` and I tried it on different elements, but it didn't do anything anywhere. I'll check out this flexbox guide. — Jus10, Jul 23 '17 at 17:12
That's a great tutorial! I book marked it, thank you! Unfortunately, I think in this case the issue arises before the flexbox container. if I add another div immediately after the md-menu item, with width 500px, it still adds a scrollbar, but now to a 500px wide area. So it is making it wider, but the md-menu width seems to be fixed, even before I use flexbox. — Jus10, Jul 23 '17 at 17:21
Ah right the all important !important.... with overflow from J.J.B — JGFMK, Jul 23 '17 at 17:59
The Chrome Developer Tools (Inspect), Styles tab is normally helpful if you have CSS styles inherited from Sass/CSS to so you can see computed classes... You can click on Element tab, then in the source, click on an element to see Styles — JGFMK, Jul 23 '17 at 18:02

J J B · Accepted Answer · 2017-07-23T18:03:58.773

2

You need to add overflow: hidden to .mat-menu-panel.

<button md-fab [md-menu-trigger-for]="settings">
  <md-icon>settings</md-icon>
</button>

<md-menu class="menu-overflow-hidden" x-position="before" #settings="mdMenu">
  <div style="display: flex; flex-direction: row; text-align: center">
    <div style="flex: 1; padding: 24px">
      <label>Left Side</label>
      <button md-menu-item routerLink=""> Option 1 </button>
      <button md-menu-item routerLink=""> Option 2 </button>
    </div>
    <div style="flex: 1; padding: 24px">
      <label>Right Side</label>
      <button md-menu-item routerLink=""> Option 3 </button>
      <button md-menu-item routerLink=""> Sign Out </button>
    </div>
  </div>
</md-menu>

Add to the main CSS file.

.menu-overflow-hidden {
  overflow: hidden !important;
}

I've created a plunker to show you how to remove the scrollbar See example plunker https://plnkr.co/edit/wDPmRi?p=preview

One problem with you wrapping the md-menu-item into two groups is that it breaks the md-menu keyboard event managment which is used for the tabbing functionality. So you loose user experience.

For what you need maybe a popover is a better idea, which still implements focus trapping. You could use this popover here.

edited Jul 23 '17 at 18:03

answered Jul 23 '17 at 17:55

J J B

8,540
1
28
42

Plunker seems to just say "Loading the Angular Material App..." and gets lots fo 404 errors. But I did do this, and it removed the scrollbar! Wohoo!! I can't seem to change the width of the dropdown now, so the buttons on the right side are cut off, and even with !important right next the overflow:hidden, I still can't seem to change the width of that one. Thank you for this btw! – Jus10 Aug 01 '17 at 04:23
I have fixed the imports on the plunker. The material team moved the location of their @angular/cdk. I will try and change the width now and update the plunker. – J J B Aug 01 '17 at 13:33
You need to add `max-width: none !important;` check plunker styles.css for example. – J J B Aug 01 '17 at 13:42
Yes! Worked perfectly. Thank you so much! – Jus10 Aug 02 '17 at 04:47

How to remove Angular Material Design Menu Box Scroll Bars

1 Answers1

Linked