1

I'm working in an Angular 9 project, using Material (SCSS stylesheets).

I have a Material select, there's many options and so you're able to scroll through them. The problem is, unless you knew there were other options, or happened to try a scroll, you wouldn't know the list extends. I want to resolve this by having the scroll bar always show.

How can I make the scroll always be visible in the material select element. I'm guessing I'll use some sort of style. I'm also using scss stylesheets.

Here's what shows now:

enter image description here

I want the scroll to always show, not just when you literally scroll down the element: enter image description here

I also make a quick https://stackblitz.com/edit/always-show-scroll-material-select

ineedtoknow
  • 1,283
  • 5
  • 28
  • 46
  • For anyone looking Dailos Medina's answer worked, and you can see the example of it working in the stackblitz above. – ineedtoknow May 05 '20 at 20:51

1 Answers1

4

The scroll is not showing because you are probably using the trackpad or a magic mouse. Using an external mouse will show the scrollbar just setting "overflow" to "auto" or "scroll".

If you want to show also the scrollbar using the trackpad or the magic mouse, you can still do it using the -webkit-scrollbar pseudo-element

In this post is also explained: Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink

In your particular case you could achieve this using these css lines:

::ng-deep .mat-select-panel::-webkit-scrollbar {
    -webkit-appearance: none;
}

::ng-deep .mat-select-panel::-webkit-scrollbar:vertical {
    width: 11px;
}

::ng-deep .mat-select-panel::-webkit-scrollbar:horizontal {
    height: 11px;
}

::ng-deep .mat-select-panel::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}
Dailos Medina
  • 161
  • 1
  • 6
  • 1
    Thanks! that let me style the scroll in the select. I am using a wireless mouse, and the scroll would show, but only when I would activate it by scrolling. Now it always shows. – ineedtoknow May 05 '20 at 20:50