Как открыть mat-выберите по выбранной опции

#css #angular #angular-material

#css #угловой #angular-материал

Вопрос:

Итак, это поведение mat-select по умолчанию (выбранная опция открывается напрямую), и это то, что дает мой код, потому что я вложил поля mat-option в тег div (для целей стилизации)

Ниже приведен мой код

component.html

 <mat-select [(value)]="selectedGroup" class="text-head" required panelClass="headerPanel">                  
    
    <mat-form-field *ngIf="groupList.length>4" class="organistation-searchField" appearance="outline">
        <input (keydown)="$event.stopPropagation()" [(ngModel)]="searchTerm" matInput (ngModelChange)="_globals.dropdownSearch($event,'group_list','headerPanel')" placeholder="Search Zone">
        <mat-icon matSuffix style="color:#24539f;">search</mat-icon>
    </mat-form-field>

    <div class="panel-optn" style="max-height:190px;">
        <mat-option class="group_list" *ngFor="let group of groupList" [value]="group.group_id">
            {{group.name}}
        </mat-option>
    </div>    
</mat-select>

component.css

 .panel-optn{
   overflow-y: auto;
   scrollbar-color: slategrey rgba(0,0,0,0.3); /* thumb and track color */
   scrollbar-width: thin;
}

.panel-optn::-webkit-scrollbar {
   width: 0.5em;
 }


.headerPanel{
   position: relative;
   top: 40px;
   overflow-y: hidden !important;
   left: -8%;
   max-width: 235px !important;
}

Использование класса panel-optn в mat-select и удаление тега div решает проблему. Но я не могу этого сделать, потому что тогда строка поиска не будет закреплена вверху. Есть ли способ вернуть поведение по умолчанию?

1. Возможно, можно переопределить стили для классов материалов, обычно мне требуется некоторый поиск и проверка элементов, но это возможно (метод проб и ошибок Chrome devtools). Просто убедитесь, что вы поместили стиль в глобальную таблицу стилей, чтобы вам не нужно было использовать ng-deep , и я обычно добавляю к этому классу имя моего компонента, чтобы я знал, что это повлияет только на этот экземпляр mat-select .

2. Как именно я могу создать стиль для достижения функциональности?

3. щелкните правой кнопкой мыши, проверьте элемент, начните просматривать элементы css, которые влияют на элемент, и изменять свойства, создавая новый класс на каждом уровне, пока не получите желаемые изменения. Есть видео / учебные пособия о том, как использовать chrome dev tools / firefox dev tools для создания css, материал просто делает его немного сложнее (возможно, потребуется добавить!важно для класса, и, безусловно, должен иметь его на глобальном уровне css)

Ответ №1:

Таким образом, он не прокручивается до последнего выбранного элемента при выборе открытия.

Я бы попытался переопределить его с помощью какой-либо директивы, основанной на методе scrollTo

1. как перейти к выбранному элементу? Я думаю, для scrollTo вам нужно указать идентификатор или класс, верно?

2. Я думал о запуске document.getElementById(‘mat-option-5’).scrollIntoView() On (SelectionChange)=»» действие в component.ts