如何正確設置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這個幫助！