PrimeFaces AutoComplete Ändern der Standardgröße

Question

Ich versuche, die Größe der AutoComplete (Oberfächen 3.3) zu ändern, habe ich alle folgenden Optionen versucht, aber die Größe bleibt gleich.

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

aber keiner von ihnen erhöht die Größe, also wie mache ich es.

Hinweis: Ich habe festgestellt, dass wenn ich (width> PanelGrid size) festlege, die Größe des Panel-Rasters automatisch geändert wird, aber AutoComplete immer noch in der Standardgröße ist.

Update: mein autocomplete Code

<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"> 

Answer 1

ich habe es die unten mit CSS

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

Nur müssen sicherstellen, dass die Auswahl doesn‘ t 250px überschreiten, sonst ist das Schließen-Symbol + zusätzlicher Text nicht sichtbar.

. Hinweis: Ich habe dies aus primeface CSS-Datei

Answer 2

Es müssen nur size von ändern;

 size="30" 

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

Answer 3

der einfachste Weg, ich weiß, ist dies: mit diesem Attribut .ui-Inputfield : Breite: einen Stil-Tag auf Ihrer Seite diese Klasse in sie fügen 600px;

aber Vorsicht durch diese werden Sie alle Eingaben ändern, die auf Ihrer Seite sind :)

Answer 4

Um die Größe des Auto-Vervollständigen zu ändern, müssen Sie die primefaces' default styleclass für Auto-Vervollständigen außer Kraft zu setzen. Mit Firebug können Sie den Stilklassennamen genau herausfinden. Wenn Sie das AutoComplete-Element mithilfe von firebug überprüfen, können Sie die Stilklasse wie .ui-autocomplete-input.ui-inputfield { width : 50px !important;
}

überschreiben! Wichtig ist hier zu beachten, um hohe Priorität zu tragen.

Answer 5

Ich habe die Standardgröße für AutoComplete in Primefaces 5.2 geändert, indem Sie das Attribut inputStyle verwenden.

Beispiel:

inputStyle="width: 100px" 

Answer 6

Verwendung wie folgt aus:

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

nur 100% für die Sie in Pixel benötigen Größe ändern ..

Answer 7

Vor allem Lösungen funktioniert nicht, wenn wir verwenden [multiple]="true" Direktive. Zusätzlich wurde diese Frage auch in den primeNg Foren gestellt und es gibt keine Lösung.

Wenn Sie oben nicht verwenden [multiple]="true" Direktive Unten Lösungen funktionieren.

• [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}"

• class="p-autocomplete" und in der Art-Datei können Sie diese Klasse definieren als .p-autocomplete{ width: 100%; }

alle von ihnen Bitte überprüfen.

Answer 8

Das ist für mich gearbeitet, um die Breite von p zu ändern: autocomplete mit [multiple] = "true".

Zuerst überprüfen Sie die HTML und CSS-Code generiert durch Primefaces mit Ihrem Browser und suchen Sie nach dem Stil p: autocomplete. In meinem Fall mit Primefaces 6.1 wird die Art wie folgt definiert:

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

Verwenden Sie dann die ID der Autocomplete in Ihrem Style-Datei auf diese Weise:

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

Diese So können Sie für jede AutoComplete eine andere Breite erhalten.