Возможно ли для Angular 2 mat-select иметь ширину поля выбора mat-select, отличную от панели mat-select-panel?

Question

У меня возникли проблемы с полем начального выбора материала mat-select, так как ширина выпадающего меню совпадает с размерами, заданными на панели mat-select-panel.Ранее у меня было простое поле выбора jQuery, которое имело одну ширину для заполнителя и отдельную ширину для выбора / параметров.Казалось, сделать это автоматически.У меня сейчас проблемы с выбором материала Angular 6, чтобы иметь разную ширину.Мне потребовалось навсегда, чтобы узнать, как изменить ширину в первую очередь.Наконец, я изменил его, используя

Угловой HTML:

<div id="selectionList">
  <mat-form-field>
    <mat select [ngclass]="{'selection-box-width' : true }" placeholder="Select an Option">
      <mat-option *ngFor="let selection of selectionList">
    Your {{selection.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

и SCSS

.selection-box-width {
    min-width: 512px;
    max-width: none;
}

Поле выбора (mat-select) всегда имеет ту же ширину, что ивсплывающее окно с более высоким z-индексом (mat-select-panel).Должен ли быть способ изменить ширину и сделать ее разной?

Answer 1

Выбор материала основан на CDK и его OverlayModule: длинный рассказ сделан коротким, наложение создает панель, которая расположена относительно выбора.

Это означает, что эта панель имеет размер в соответствии с положением ее родителя (здесь это выбор).

Если вы хотите изменить его, вам придется взглянуть на их документацию (или проверить HTML-элемент, но с тем же успехом выучить что-нибудь из этого), чтобы узнать класс панель (по умолчанию, а не та, которую вы предоставляете):

class="mat-select-panel {{ _getPanelTheme() }}"

Если вы осмотрите элемент, вы действительно увидите этот класс:

class="ng-trigger ng-trigger-transformPanel ng-tns-c2-1 mat-select-panel mat-primary ng-star-inserted mat-select-panel-done-animating"
                                                            |
                                                            |
                                                          HERE !

При этом вы можете просто знать, что нужно изменить, чтобы увеличить размер панели:

.mat-select-panel {
  width: 200% !important;
  min-width: 200% !important;
  max-width: none !important;
}

Вам придется использовать !important и поместить его в свою глобальную таблицу стилей, потому что селектор CSS не обладает высокой точностью (то есть он будет применен первым и переопределен другими правилами), и так как он исходит из библиотека, вы не можете использовать ваши компоненты инкапсулированные представления.

Если вы хотите, вы также можете назначить своей панели пользовательский класс с

panelClass="yourCustomClass"

Что позволит вам применять этот стиль к определенным выборам вместо каждого из них.

Answer 2

Я возвращаюсь к тому, кто ответил на этот вопрос. Вы оба были для меня, чтобы лучше понять концепцию. Я обнаружил, что есть немного CSS, в котором я нуждался. Мой код выглядит следующим образом:

<div id="selectionList">
  <mat-form-field>
    <mat select panelClass="panel-selection-width" placeholder="Select an Option">
      <mat-option *ngFor="let selection of selectionList">
        Your {{selection.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

и, в styles.scss , SCSS:

.panel-selection-width {
  max-width: none !important;
}

обязательно важен! Важный, но [ngclass] = "{'selection-box-width': true}" не был необходим. Мне нужно это в SCSS компонента:

#selectionList > .mat-form-field {
    min-width:250px;
}

Но теперь это работает!

Спасибо

Answer 3

Вам нужно будет стилизовать оба.Стили для панели должны быть применены с помощью опции panelClass.Использование ngClass применит стиль к выбранному входу, но не к панели.

<mat-select 
    [ngclass]="{'selection-box-width' : true }" 
    panelClass="selection-panel-width" 
    ...

Для панели вам, вероятно, придется использовать !important с настройкой максимальной ширины и, возможно, другими, икласс должен быть глобальным классом, а не частью вашего компонента.