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

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

它的工作对我这样

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

Answer 2

如果别人不知道如何实现了全响应自动完成组件：

PrimeNg版本：4.0.3 角：4.0.3

对我来说，地球上唯一可能的事情，工作是这一风格的组合：

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

与CSS的定义如下：

.p-autocomplete{ 
    width: 100%; 
    } 

Hooope这个帮助！