对齐芯片自动填充组件中按钮下方的下拉列表

Question

在Chips Autocomplete组件中，我在下拉列表上方添加了按钮，如下图所示。

我想在按钮下面添加这个下拉菜单，就像这样。

下拉和按钮都应用了填充，但没有得到确切的结果。这是stackblitz链接。

Answer 1

尝试这样的事情：

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>

Answer 2

您可以使用纯CSS来执行此操作。使用翻译 - 它将允许相对于其原点在x，y轴上移动元素固定量（例如像素）。

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