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

时间:2019-08-10 07:11:32

标签: css bootstrap-4 primeng

我使用了PrimeNG Autocomplete,遇到了一些冲突,当我使用这种样式时,自动填充下拉菜单处于下降位置

此处的图片描述

enter image description here

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

谢谢

<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%;
  }

1 个答案:

答案 0 :(得分:1)

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

您要给输入字段100%的宽度,为什么图标会下降。希望对您有所帮助。