Размер панели выбора при использовании нескольких опор на коврике - PullRequest
0 голосов
/ 27 марта 2020

Этот вопрос является копом 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.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...