PrimeFacesオートコンプリートデフォルトサイズの変更

autoComplete（プライムフェーズ3.3）のサイズを変更しようとしていますが、以下のすべてのオプションを試しましたが、サイズは変わりません。PrimeFacesオートコンプリートデフォルトサイズの変更

size="600" 
Style="width:600px;" 
StyleClass > css file with width:600px;

しかし、どれもサイズが大きくなりません。どうすればいいですか？

注：（width> PanelGrid size）を指定すると、パネルのグリッドサイズは自動的に変更されますが、autoCompleteはデフォルトサイズのままです。

更新：私のオートコンプリートコード

<p:autoComplete id="autoTest" value="#{testMB.selectedTest}" 
completeMethod="#{testMB.completeTest}" var="test" 
itemLabel="#{test.name}" itemValue="#{test}" converter="#{testConverter}" 
forceSelection="TRUE" queryDelay="1000" multiple="TRUE" size="600" 
process="@this">

出典

2012-09-24 user1433804

私はそれがCSS以下

.ui-autocomp .ui-inputfield { 
clear: left; 
cursor: text; 
list-style-type: none; 
margin: 0; 
min-height: 1px; 
overflow: hidden; 
width: 250px; 
}

ちょうど選択は「doesnのことを確認する必要があります使用したのを変更します250pxを超えると、閉じるアイコン+余分なテキストは表示されません。

注：私はオートコンプリートのサイズを変更するにはprimeface CSSファイル

出典

2012-09-29 17:19:00 user1433804

ちょうどsizeの変更する必要がありますされます。

 size="30" 

    <p:autoComplete id="yourId" value="#{YourBean.value}" completeMethod="#{YurBean.complete}" size="30"/>

出典

2012-09-24 09:21:18 CycDemo

私はそれを試みましたが、動作しません。更新されたコードを確認してください。 – user1433804

私が知っている最も簡単な方法はこれです：がそれで、このクラスを入れて、あなたのページにスタイルタグを追加します。 .ui-入力フィールドをこの属性で：幅：600PX。このことにより、

しかし、注意してください、あなたのページにあるすべての入力 :)

出典

2012-09-25 11:48:34 Hossein

からこれを得た、あなたは、オートコンプリートのためprimefacesのデフォルトのstyleClassのをオーバーライドする必要があります。ファイヤーバグを使うと、スタイルクラス名を正確に知ることができます。 firebugを使用してオートコンプリート要素を検査する場合は、.ui-autocomplete-input.ui-inputfield { width : 50px !important; }

のような優先度を上書きすることができます。

出典

2013-02-11 14:08:09 Arun

inputStyle属性を使用して、Primeface 5.2のオートコンプリートのデフォルトサイズを変更しました。

例：

<p:autoComplete 
    ... 
    style = "width: 100%" 
    inputStyle = "width: 100%" />

ちょうど私たちが使用している場合、すべてのソリューションの上

出典

2015-05-05 15:16:35 mhei

使用[multiple]="true"ディレクティブ。さらに、この質問はprimeNgフォーラムで尋ねられました。解決策はありません。

[multiple]="true"の指示文を使用しない場合は、以下の解決策が有効です。

[style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}"
class="p-autocomplete"とスタイルファイルにあなたは.p-autocomplete{ width: 100%; }

として、このクラスを定義することができ、それらのすべてを確認してください。

出典

2015-08-28 15:12:10

は動作しません..あなたは、ピクセル単位で必要なサイズのために100％に変更します。このような

inputStyle="width: 100px"

出典

2017-06-10 14:01:28

[style] = "{'width'： '100％'}" AND [inputStyle] = "{'width'： '100％'}"を使用すると、私のトリックを行いました。 –

これは、p：autoCompleteの幅を[multiple] = "true"に変更するのに役立ちました。

まず、ブラウザでPrimefaceで生成されたhtmlとcssコードを調べ、p：autoCompleteのスタイルを探します。

.ui-autocomplete-multiple-container.ui-inputfield {...

次に、このようにあなたのスタイルファイルでオートコンプリートのIDを使用します：

#myAutoCompleteId .ui-autocomplete-multiple-container.ui-inputfield { width: 330px !important; }

この私の場合は、Primefaces 6.1を使用して、スタイルはこのように定義されautoCompleteごとに異なる幅を得ることができます。

出典

2018-02-14 15:56:25 jmoran

複数のクラスを同じものに上書きしたい場合に備えて、クラス属性を追加することもできます。 – Kukeltje

PrimeFacesオートコンプリートデフォルトサイズの変更

答えて

関連する問題