p：autoCompleteの幅を正しく設定する方法

Question

autoCompleteの幅をパネルに正しく設定する方法を教えてください。

あなたが使用して、見ることができるように：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：これは何ですか

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

パネル

EDITの外にある矢印を配置しますautoCompleteタグにstyle="width: 100%"を設定すると発生します。

EDIT3：私は両方兼ね備えたときにこの問題が発生した：他の誰かがフルを達成する方法を疑問に思っている場合は

Answer 1

それが私のためにこのよう

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

Answer 2

を働いレスポンスオートコンプリートコンポーネント：

CSSの次の定義と

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

：

PrimeNgバージョン：4.0.3 角度：私にとっては4.0.3

このスタイルの組み合わせだった働いた地球上で唯一の可能な事は：

.p-autocomplete{ 
    width: 100%; 
    } 

これは役立ちます。