ngx-perfect-scrollbar можно использовать для угловых элементов материала? - PullRequest
Новая
       13

ngx-perfect-scrollbar можно использовать для угловых элементов материала?

0 голосов
/ 07 января 2019

Я хотел бы добавить идеальную полосу прокрутки для элемента mat-autocomplete. Можно ли добавить идеальную полосу прокрутки ngx на угловые элементы материала?

1 Ответ

0 голосов
/ 11 февраля 2019

Вот как я его добавил, но по какой-то причине он работает в Chrome, а в Firefox - нет. Если я проверю элементы с помощью Firefox и разверну оверлей div, то будет работать и полоса прокрутки, но только после того, как я разверну этот узел. Если вы найдете решение для этого, дайте мне знать. 

    <mat-form-field>
       <mat-chip-list #chipList>
       <mat-chip *ngFor="let item of itemsSelected"
              [selectable]="true"
              [removable]="true"
              (removed)="remove(item)">
         {{item}}
         <mat-icon matChipRemove>cancel</mat-icon>
       </mat-chip>
       <input placeholder="{{placeholder | translate}}"
           #itemInput
           [formControl]="itemCtrl"
           [matAutocomplete]="auto"
           [matChipInputFor]="chipList"
           [matChipInputAddOnBlur]="true">
       </mat-chip-list>
       <mat-autocomplete #auto="matAutocomplete" 
                         (optionSelected)="selected($event)" 
                         (opened)="matAutocompleteOpened()"
                         class="overflow-hidden">
          <perfect-scrollbar>
              <mat-option #matOption *ngFor="let item of filteredItems | async" [value]="item">
                 {{item}}
              </mat-option>
          </perfect-scrollbar>

       </mat-autocomplete>
    </mat-form-field>

И CSS 

.mat-autocomplete-panel.overflow-hidden {
     overflow: hidden !important;
     position: relative !important;

    .ps__rail-y:hover {
         background-color: transparent !important;
    }
}

С 

@Component({
  ------
  encapsulation: ViewEncapsulation.None
})
...