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

У меня возникли проблемы с полем первоначального выбора материала 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). Должен ли быть способ изменить ширину и сделать ее другой?


angular sass angular-material html-select
person Matthew Dewell    schedule 13.09.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я отступаю от того, кто ответил на этот вопрос. Вы оба помогли мне лучше понять концепцию. Я обнаружил, что мне нужно немного 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;
}

! important определенно нужен, но [ngclass] = "{'selection-box-width': true}" не нужен. Мне это нужно в SCSS компонента:

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

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

Спасибо

person Matthew Dewell    schedule 13.09.2018

arrow_upward
0
arrow_downward

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

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

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

person G. Tranter    schedule 13.09.2018
comment
Ваш ответ казался очень многообещающим, но, похоже, не требуется, чтобы SCSS моего app.component.scss применялся к панели выбора mat-select. Я ввел .selection-panel-width в app.component, scss, но, похоже, это не влияет. Он имеет запись в ‹div› 'ng-reflection-ng-class = selection-panel-width', но 'max-width', похоже, застрял на уровне '280px' для CSS .mat-select-panel. - person Matthew Dewell; 13.09.2018
comment
Вы определили класс selection-panel-width в своей глобальной таблице стилей и использовали ли модификатор! Important для настройки максимальной ширины? - person G. Tranter; 13.09.2018
comment
Вы правы, я поместил определение класса в файл app.component.scss, а не в styles.scss. Я помещаю .selection-panel-width в styles.scss, работает. Спасибо!!! - person Matthew Dewell; 13.09.2018