Reputation: 13
The matter is the following, I have a selector and I want to show the scrollbar (I am using ng-select). The point is that using Overflow-y: visible or scroll nothing appears, however in Firefox it does! I already tried adding a specific height, also a max-height and I get no results. Someone who can tell me what I'm doing wrong?
HTML:
<ng-select class="ng-select form-control form-control-solid form-control-lg px-2.5 py-1 text-sm rounded"
[clearable]="false" [searchable]="false" placeholder="Select a Merchant"
(change)="storeSelectedMerchant($event)" [ngModel]="(activeMerchant$ | async)" *ngIf="merchants$ | async">
<ng-option value="all"><b>All Merchants</b></ng-option>
<ng-option *ngFor="let merchant of merchants$ | async" [value]="merchant.guid">
<p>
<strong class="block">{{merchant.dba}}</strong>
<span>MID: {{merchant.mid}}</span>
</p>
</ng-option>
</ng-select>
</div>
CSS:
.ng-dropdown-panel {
background: #eee;
left: 0;
margin-top: 10px;
border-radius: 3px 3px 6px 6px;
overflow: hidden;
-webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.16);
-moz-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.16);
.ng-dropdown-panel-items.scroll-host {
overflow-y: visible !important;
&::-webkit-scrollbar {
width: 6px !important;
}
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 0px white(0, 0, 0, 0);
-moz-box-shadow: inset 0 0 0px white(0, 0, 0, 0);
box-shadow: inset 0 0 0px white(0, 0, 0, 0);
border-radius: 3px;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
}
}
Upvotes: 0
Views: 62
Reputation: 36
Please try replacing the overflow-y: visible !important
to overflow-y: scroll !important
.
Upvotes: 1