Primeng: how to make p-autocomplete width 100% in whatever div it is in

[quiringk]

I'm submitting a ... (check one with "x")

[ x] bug report => Search github for a similar issue or PR before submitting
[x ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior

I want to make p-autocomplete 100% width in whatever div it is in. All I have successfully done is assign [size]=number or [inputStyle]={'width': '100px'}, but these are static widths. I want the input box to grow/shrink to 100% of the div size it is in. I haven't messed around with any of your columns because I am using bootstrap grid.

Expected behavior

p-autocomplete width is 100% of the div it is in.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Angular version: 2.0.X
  
  2.2.3

• PrimeNG version: 2.0.X
  
  1.0.0-rc.4

[quiringk]

I figured it out. You have to use a combination of [style] and [inputStyle] with the curly brackets and single quotes like so:

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

[quiringk]

Also, in order to get multiple styles for [style] or [inputstyle], do it like this:

[inputStyle]="{'width':'100%','font-size': '16px'}"

[garthmason]

thanks for this, pointed me in the right direction for styling on the calendar component

[bvamos]

It does not work for me when [multiple]="true"

[laslorma]

If someone else is wondering how to achieve a full responsive autocomplete component on:

PrimeNg version: 4.0.3 Angular: 4.0.3

For me the only possible thing on earth that worked was a combination of this styles :

[style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" class="p-autocomplete"
with the following definition of the css:

.p-autocomplete{
    width: 100%;
  }

Hooope this helps!

[ugurayan]

As a result,
Whenever I checked with [multiple]="true" definition, above all solutions does not work .!!!!.

[IAfanasov]

and doesn't work with [dropdown]="true"

[cp79shark]

It's annoying yes, for multiple. The simplest way to tackle it is have the following CSS in your application. Then you don't need [style] and [inputStyle]. This will obviously apply to every autocomplete, but it's probably the exception that you don't want the control 100% width of its container.

.ui-autocomplete-multiple {
    width: 100% !important;
}

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

[n-pilipovic]

This one works for me:

.ui-autocomplete-token {
width: 100%;
display: block;
}

.ui-autocomplete-input-token {
display: block;
}

[takasoft]

<div class="ui-fluid">
    <p-autoComplete 
      [(ngModel)]="selectedParams" 
      [suggestions]="filteredParamsMultiple" 
      (completeMethod)="filterParamMultiple($event)" 
      styleClass="wid100"
      [minLength]="1" placeholder="Parameters" 
      field="name" 
      [multiple]="true">
    </p-autoComplete>
</div>

This works even when [multiple]="true"

[Torzelan]

autocomplete with dropdown solution: in component SCSS file write this

:host ::ng-deep {
    input {
        width: calc(100% - 28px) !important;
    }

    .ui-autocomplete-dd{
        width: 100%;
    }
}

Remember that you have to have .scss not .css
The 28px value is because my dropdown arrow button has this width

[nsksaisaravana]

class="ui-fluid" works for me.

<div class="ui-fluid">
      <p-autoComplete [(ngModel)]="selectedCompany" (onSelect)="onSearchSelected()" [suggestions]="companyResult" (completeMethod)="searchCompany($event)" ></p-autoComplete>
<div>

[santiagofdezg]

I know that it's an old and closed issue, but if someone gets here now and none of these solutions works you can try to wrap the <p-autoComplete> </p-autoComplete> in a span with the class p-fluid. It works with [multiple]="true". Example:

<span class="p-fluid">
    <p-autoComplete [(ngModel)]="item" [suggestions]="filterAC" [multiple]="true"
        [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" 
        (completeMethod)="onComplete($event)" >
    </p-autoComplete>
</span>

For me it even worked without adding [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}". I have tested this on Primeng 12.0.0 and Angular 12.
Original source