Этот вопрос является копом ie моей проблемы , где вы можете видеть изображения.
Что вы пытаетесь сделать?
Я пытаюсь чтобы использовать mat-select-trigger , и когда я использую опору 'множественный', размер панели выбора увеличивается.
Размер панели выбора должен иметь размер матрицы поле формы.
Какие действия по устранению неполадок вы предприняли?
::ng-deep .cdk-overlay-pane {
.mat-select-panel {
min-width: 100% !important;
transform: translateX(40px) !important;
}
}
С помощью приведенного выше кода на S CSS моего компонента я могу уменьшить размер ширины выберите панель, но когда я уменьшу ее, ориентация выбранной панели перемещается влево, поэтому я использую преобразование, чтобы поместить его в «центр». Вот так:
- вот изображение, которое я пока не могу загрузить -
Но проблемы с этим «решением»:
- Все это влияет на выбор моего приложения.
- Это не внешний вид коврика по умолчанию.
Воспроизведение
<mat-form-field fxFlex floatLabel="always" shouldLabelFloat="false" appearance="outline">
<mat-label>Reparações</mat-label>
<mat-select [formControl]="reparacoesId" multiple>
<mat-select-trigger>
{{temReparacoes() ? (reparacoesId.value[0].repairType | translateEnum: 'reparacao') : ('')}}
<span *ngIf="reparacoesId.value?.length > 1">
(+{{reparacoesId.value.length - 1}})
</span>
</mat-select-trigger>
<mat-option panelClass="reparacoes-options" *ngFor="let reparo of this.item.avaliacao.reparos"
[value]="reparo.id">{{reparo.repairType | translateEnum: 'reparacao'}}</mat-option>
</mat-select>
</mat-form-field>
С кодом выше у меня есть следующий результат:
- Вот изображение, которое я пока не могу загрузить -
Шаги для воспроизведения: 1. На <mat-select [formControl]="reparacoesId" multiple>
просто используйте несколько опор. Если вы уберете несколько пропеллеров, выбор превратится в обычный вид.
Результат, который я хотел бы получить
Ну, я просто хочу этот вид ...
- Вот изображение что я пока не могу загрузить -
... но с флажками и правильной шириной обычного коврика.
Environment
- Angular: 7.2.0
- CDK / Материал: 7.3.7
- Браузер (ы): Chrome
- Операционная система: Элементарный os.