Primeng 自动完成下拉位置不起作用

Question

我使用了 PrimeNG Autocomplete ，我遇到了一些冲突，当我使用这种样式时自动完成下拉菜单是采取向下的位置，

此处为图片说明

有人知道如何正确地做到这一点吗？

谢谢

<div class="col">
                          <div class="form-group">
                            <label >Please Select a Tag</label>
                            <p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="30"
                                            [minLength]="1" placeholder="Hint: type 'Gold' or 'G'" [dropdown]="true"[style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" class="p-autocomplete" >
                              <ng-template let-brand pTemplate="item">
                                <div class="ui-helper-clearfix" style="border-bottom:0px solid #D5D5D5">

                                  <div style="font-size:18px;float:right;margin:10px 10px 0 0">{{brand}}</div>
                                </div>
                              </ng-template>
                            </p-autoComplete>
                          </div>
                        </div>

风格

.p-autocomplete{
    width: 100%;
  }

Answer 1

您好，只需从 <p-autoComplete> 标签中删除 [inputStyle]="{'width':'100%'}"。它会工作正常。检查 stackblits

您为输入字段提供了 100% 的宽度，这就是图标下降的原因。希望对你有帮助。

Primeng 自动完成下拉位置不起作用

Prime Ng Autocomplete drop down position not working

css

bootstrap-4

primeng