CODEWITHSUNDEEP
cssangularsassangular-material
ineedtoknow
ineedtoknow

Reputation: 1644

Make Scroll Always Show In Material Select

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

Upvotes: 2

Views: 5075

Answers (1)

Dailos Medina
Dailos Medina

Reputation: 161

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

Upvotes: 4

Related Questions