PrimeFaces自動完成更改默認大小

我想改變autoComplete（primefaces 3.3）的大小，我嘗試了以下所有選項，但大小保持不變。PrimeFaces自動完成更改默認大小

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

但他們沒有一個增加大小，所以我該怎麼做。

注意：如果我指定（寬度> PanelGrid大小），那麼面板網格大小會自動更改，但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; 
}

只需要確保選擇沒有按」 t超過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-inputfield 與此屬性：寬度：600px的;

但要注意這個，你會改變這一切都在你的頁面輸入 :)

來源

2012-09-25 11:48:34 Hossein

要更改自動完成的大小，你需要重寫爲自動完成的primefaces'默認的styleClass。使用螢火蟲，你可以準確找出styleclass的名字。如果您使用螢火蟲檢查自動完成元素，則可以覆蓋樣式類似於.ui-autocomplete-input.ui-inputfield { width : 50px !important; }

！此處重要的是要堅持提高優先級。

來源

2013-02-11 14:08:09 Arun

我使用inputStyle屬性更改了Primefaces 5.2中自動完成的默認大小。

例子：

inputStyle="width: 100px"

來源

2015-05-05 15:16:35 mhei

使用這樣的：

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

只是改變了你需要的像素大小100％..

來源

2015-08-28 15:12:10

以上所有的解決方案，如果我們使用不工作[multiple]="true"指令。另外這個問題也在primeNg論壇上提出，並沒有解決方案。

如果您不使用以上[multiple]="true"指令下面的解決方案將工作。

[style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}"
class="p-autocomplete"，風格文件，你可以定義這個類爲.p-autocomplete{ width: 100%; }

請檢查所有的人。

來源

2017-06-10 14:01:28

使用[style] =「{'width'：'100％'}」AND [inputStyle] =「{'width'：'100％'}」爲我做了訣竅。 –

這對我來說改變了p：autoComplete的寬度[multiple] =「true」。

首先，使用瀏覽器檢查由Primefaces生成的html和css代碼，並查找p：autoComplete的樣式。在我的情況下，使用Primefaces 6.1，風格的定義是這樣的：

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

然後，使用自動完成的ID在樣式文件中這樣說：

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

這你可以爲每個autoComplete獲得不同的寬度。

來源

2018-02-14 15:56:25 jmoran

你也可以添加一個類屬性，以防你想用同一個屬性覆蓋多個屬性。 – Kukeltje

PrimeFaces自動完成更改默認大小

回答

相關問題