CODEWITHSUNDEEP
htmlcssangularsafariangular-material
Nicholas
Nicholas

Reputation: 1143

How to display scroll bar in angular material mat-select on safari?

This is a browser specific issue. In chrome, firefox and edge the scroll bar is displayed when there are more mat-options than the mat-select can display. The user knows there are more options because of the scroll bar. In safari however, the scroll bar only appears when the user scrolls down. This means the user might not be aware there are more mat-options in the mat-select. Here is some example code:

<mat-select>
  <mat-option>
    Option 1 
  </mat-option>
  <mat-option>
    Option 2 
  </mat-option>
  <mat-option>
    Option 3 
  </mat-option>
  <mat-option>
    Option 4 
  </mat-option>
  <mat-option>
    Option 5 
  </mat-option>
  <mat-option>
    Option 6 
  </mat-option>
</mat-select>

How can i force the scroll bar to be displayed always on safari like the other browsers? The user might not know Option 6 exists otherwise in the example above.

Upvotes: 5

Views: 2142

Answers (1)

Padmapriya Vishnuvardhan
Padmapriya Vishnuvardhan

Reputation: 2166

Try to forcefully show it on hover

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4); 
    border-radius: 8px;
    -webkit-border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(100,100,100,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

Upvotes: 1

Related Questions