PrimeFaces AutoComplete che modifica la dimensione predefinita

Question

Sto provando a cambiare la dimensione del completamento automatico (primefaces 3.3), ho provato tutte le opzioni di seguito ma la dimensione rimane la stessa.

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

ma nessuno di questi aumenta la dimensione, quindi come faccio?

Nota: ho notato che se si specifica (larghezza> Dimensione PanelGrid), la dimensione della griglia del pannello cambia automaticamente ma il completamento automatico è ancora nella dimensione predefinita.

Aggiornamento: il mio codice di completamento automatico

<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

ho fatto utilizzando il sotto css

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

solo bisogno di fare in modo che la selezione doesn' t supera 250 px, altrimenti l'icona di chiusura + testo extra non sarà visibile.

. Nota: Ho ricevuto questo da primefaces file css

Answer 2

E 'solo bisogno di cambiare di size;

 size="30" 

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

Answer 3

il modo più semplice che so è questo: aggiungere un tag di stile alla tua pagina mettere questa classe in esso: .ui-inputfield con questo attributo: width: 600px;

ma attenzione da questo si cambierà tutti gli input che si trovano nella tua pagina :)

Answer 4

Per modificare le dimensioni di completamento automatico, è necessario sostituire styleClass di default le primefaces' per il completamento automatico. Usando firebug puoi trovare esattamente il nome della stylclass. Se controlli l'elemento Completamento automatico usando firebug, puoi sostituire la classe stilizzata come .ui-autocomplete-input.ui-inputfield { width : 50px !important;
}

! Importante è indicato qui per insistere per portare alta priorità.

Answer 5

Ho modificato la dimensione predefinita per il completamento automatico in Primefaces 5.2 utilizzando l'attributo inputStyle.

Esempio:

inputStyle="width: 100px" 

Answer 6

uso in questo modo:

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

basta cambiare il 100% per il formato che avete bisogno in pixel ..

Answer 7

Sopra tutte le soluzioni non funziona se usiamo [multiple]="true" direttiva. Inoltre questa domanda viene anche posta nei forum di primeNg e non c'è soluzione.

Se non si utilizza sopra la direttiva [multiple]="true" Le soluzioni seguenti funzioneranno.

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

• class="p-autocomplete" e nel file di stile è possibile definire questa classe come .p-autocomplete{ width: 100%; }

Si prega di verificare tutti loro.

Answer 8

Questo ha funzionato per me per modificare la larghezza di p: autoComplete con [multiple] = "true".

Innanzitutto, ispezionare il codice html e css generato da Primefaces con il browser e cercare lo stile su p: autoComplete. Nel mio caso, utilizzando primefaces 6.1, lo stile si definisce in questo modo:

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

Quindi, utilizzare l'ID del completamento automatico nel vostro file di stile in questo modo:

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

Questo modo puoi ottenere una larghezza diversa per ogni completamento automatico.