CODEWITHSUNDEEP
angularmenumaterial-design
Jus10
Jus10

Reputation: 15679

How to remove Angular Material Design Menu Box Scroll Bars

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;
}

Upvotes: 2

Views: 8191

Answers (1)

J J B
J J B

Reputation: 9230

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.

Upvotes: 2

Related Questions