Для выравнивания выпадающего меню под кнопкой в ​​компоненте «Автозаполнение фишек» - PullRequest
0 голосов
/ 06 сентября 2018

In Chips Autocomplete компонент, я добавил кнопку над выпадающим , как показано на изображении ниже.

enter image description here

Я хочу добавить этот выпадающий список под кнопкой, что-то вроде этого. enter image description here

Применен отступ для раскрывающегося списка и кнопки, но не получен точный результат. Вот ссылка stackblitz .

Ответы [ 2 ]

0 голосов
/ 07 сентября 2018

Попробуйте что-то вроде этого:

DEMO

<mat-grid-list [cols]="breakpoint" rowHeight="277px" (window:resize)="onResize($event)">
    <mat-grid-tile [class.fullWidth]="breakpoint == 1" class="g1">


        <mat-form-field class="example-chip-list">
            <mat-chip-list #chipList>
                <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable" [removable]="removable" (removed)="remove(fruit)">
                    {{fruit}}
                    <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                </mat-chip>
                <input placeholder="New Players..." #fruitInput [formControl]="fruitCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList"
                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="add($event)">
            </mat-chip-list>
            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
                <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
                    {{fruit}}
                </mat-option>
            </mat-autocomplete>

            <div style="width: 100% !important;margin-top: 5%;border-top: 2px solid red;">

            <button type="button" style="width: 100% !important;margin-top: 5%;" mat-stroked-button color="primary">
<mat-icon>add</mat-icon>CREATE NEW PLAYER</button>
        </div>
        </mat-form-field>
</mat-grid-tile>
0 голосов
/ 06 сентября 2018

Вы можете использовать простой CSS для этого. Используйте translate - это позволит переместить элемент относительно его начала по оси x, y на фиксированную величину (например, пикселей).

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...