Martin Rios
Martin Rios

Reputation: 13

Scrollbar dont show on Chrome

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

Chrome: enter image description here

Firefox: enter image description here

Upvotes: 0

Views: 62

Answers (1)

Please try replacing the overflow-y: visible !important to overflow-y: scroll !important.

Upvotes: 1

Related Questions