css - 如何正确设置 p :autoComplete width to fill a panel

Question

如何设置自动完成宽度以正确填充面板？

如您所见，使用:

.ui-autocomplete input {
        width: 100%;
    }

会将箭头移出面板

编辑:panelGrid

<p:panelGrid columns="3" style="border: hidden; width: 100%" styleClass="ui-panelgrid-blank">
                        <p:panelGrid>
                            <p:outputLabel value="Item name" for="haveName" />
                            <br/>
                            <p:autoComplete id="haveName" effect="fade" dropdown="true" forceSelection="true"/>
                        </p:panelGrid>

                        <p:panelGrid>
                            <p:outputLabel value="Paint" for="havePaint" />
                            <br/>
                            <p:autoComplete id="havePaint" effect="fade" dropdown="true" forceSelection="true"/>
                        </p:panelGrid>

                        <p:panelGrid>
                            <p:outputLabel value="Certification" for="haveCert" />
                            <br/>
                            <p:autoComplete id="haveCert" effect="fade" dropdown="true" forceSelection="true"/>
                        </p:panelGrid>
                    </p:panelGrid>

EDIT2:当我在 autoComplete 标记中设置 style="width: 100%" 时会发生这种情况:

EDIT3:当我将两者结合时会发生这种情况:

Answer 1

如果其他人想知道如何在以下位置实现完全响应式自动完成组件:

PrimeNg 版本:4.0.3 Angular :4.0.3

对我来说，世界上唯一可行的方法就是结合这些风格:

 [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" class="p-autocomplete"

具有以下css定义:

.p-autocomplete{
    width: 100%;
  }

这有帮助!