PrimeFaces AutoComplete resizes by default

Question

I'm trying to resize autocomplete (primefaces 3.3), I tried all the options listed below, but the size remains the same.

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

but none of them increase in size, so how to do it.

Note. I noticed that if I specify (width> PanelGrid size), the grid size of the panel will change automatically, but autoComplete is still in the default size.

Update: my 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

I did this using the css below

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

You just need to make sure that the selection does not exceed 250 pixels, otherwise the close icon + additional text will not be visible.

Note: I got this from the css file of the firstface file

Answer 2

I changed the default size for autocomplete in Primefaces 5.2 using the inputStyle attribute.

Example:

 inputStyle="width: 100px" 

Answer 3

Just need to change size ;

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

Answer 4

To resize autocomplete, you need to override the default styleClass style for autocomplete. Using firebug, you can find out exactly the name of styleclass. If you check the autocomplete element with firebug., You can override the style class, for example .ui-autocomplete-input.ui-inputfield { width : 50px !important;
} .ui-autocomplete-input.ui-inputfield { width : 50px !important;
}

! It is important to note that insisting on having high priority.

Answer 5

First of all, solutions do not work if we use the [multiple]="true" directive. In addition, this question was also asked on the PrimeNg forums, and there is no solution.

If you do not use the directive [multiple]="true" Below the solutions will work.

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

• class="p-autocomplete" and in the style file you can define this class as .p-autocomplete{ width: 100%; } .p-autocomplete{ width: 100%; }

Please check everything.

Answer 6

The easiest way I know is: add a style tag to your page, put this class in it: .ui-InputField with this attribute: width: 600px;

but be careful, you will change all the inputs that are on your page :)

Answer 7

use the following:

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

just change 100% to the size you need in pixels.

Answer 8

This helped me change the width of p: autoComplete from [multiple] = "true".

First, look at the html and css code generated by Primefaces by your browser and find the style for p: autoComplete. In my case, using Primefaces 6.1, the style is defined as follows:

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

Then use the autocomplete identifier in the style file as follows:

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

This way you can get a different width for each autocomplete.

Answer 9

I know this a long time ago, but! after digging in styles, they helped me in several autocomplete for PF 6.1:

 .ui-autocomplete{ width: 100% !important; } .ui-autocomplete-input{ width: 100% !important; } .ui-autocomplete-multiple { width: 98% !important; } .p-autocomplete { width: 98% !important; } .ui-autocomplete-multiple-container { width: 100% !important; } 

Adjust according to your needs.