Угловой коврик - выберите количество показанных опций - PullRequest
Новая
       11

Угловой коврик - выберите количество показанных опций

0 голосов
/ 05 июля 2018

У меня есть элемент mat-select с фиксированным числом элементов mat-option. Чтобы увидеть последний элемент, мне нужно прокрутить список. Можно ли расширить область, чтобы я мог видеть последний элемент без прокрутки? 

<mat-form-field appearance="outline">
    <mat-select>
        <mat-option [value]="0">Automatically</mat-option>
        <mat-option [value]="10">10</mat-option>
        <mat-option [value]="20">20</mat-option>
        <mat-option [value]="50">50</mat-option>
        <mat-option [value]="100">100</mat-option>
        <mat-option [value]="-1">All</mat-option>
    </mat-select>
</mat-form-field>

[Что у меня есть]

[Что я хочу]

Заранее спасибо!

Решение:

Я наконец решил это так: 

@Component({
  selector: 'select-value-binding-example',
  templateUrl: 'select-value-binding-example.html',
  styleUrls: ['select-value-binding-example.css'],
  encapsulation: ViewEncapsulation.None
})

и 

.mat-select-panel{
  max-height: <your new height>
}

в компоненте .scss-файла

Ответы [ 2 ]

0 голосов
/ 05 июля 2018

Если у вас фиксированное число опций, самый простой способ - угадать, сколько вам нужно высоты, и: 

::ng-deep() .mat-select-panel {
    max-height: <your new height>
}

Таким образом, окно выбора будет отображаться чисто со всеми тенями границ и всеми

0 голосов
/ 05 июля 2018

Добавить ViewEncapsulation.None к и добавить csss для настройки вашего циновки-select 

@Component({
  selector: 'select-value-binding-example',
  templateUrl: 'select-value-binding-example.html',
  styleUrls: ['select-value-binding-example.css'],
  encapsulation: ViewEncapsulation.None
})

добавьте это свойство css к вашей .mat-select-panel 

.mat-select-panel{
  overflow:visible !important;
}

проверьте этот пример: https://stackblitz.com/edit/angular-swkgk4

...