如何正确设置 p:autoComplete 宽度以填充面板

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：这就是我style="width: 100%"在 autoComplete 标签中设置时发生的情况：

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

Answer 1

如果其他人想知道如何在以下方面实现完全响应的自动完成组件：

PrimeNg 版本：4.0.3 角度：4.0.3

对我来说，地球上唯一可行的方法是这种风格的组合：

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

使用以下 css 定义：

.p-autocomplete{
    width: 100%;
  }

Hooope 这有帮助！