How to correctly set p:autoComplete width to fill a panel

Question

How can I set the autoComplete width to fill the panel correctly?

As you can see, using:

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

will put the arrow out of the panel

EDIT: panelGrid

<p:panelGrid columns="3" style="border: hidden; width: 100%" styleClass="ui-panelgrid-blank">
                        <p:panelGrid>
                            <p:outputLabel value="Item name" for="haveName" />
                            <br/>
                            <p:autoComplete id="haveName" effect="fade" dropdown="true" forceSelection="true"/>
                        </p:panelGrid>

                        <p:panelGrid>
                            <p:outputLabel value="Paint" for="havePaint" />
                            <br/>
                            <p:autoComplete id="havePaint" effect="fade" dropdown="true" forceSelection="true"/>
                        </p:panelGrid>

                        <p:panelGrid>
                            <p:outputLabel value="Certification" for="haveCert" />
                            <br/>
                            <p:autoComplete id="haveCert" effect="fade" dropdown="true" forceSelection="true"/>
                        </p:panelGrid>
                    </p:panelGrid>

EDIT2: this is what happens when I set style="width: 100%" in the autoComplete tag:

EDIT3: this happens when I combine both:

Answer 1

In version primeng 11.3.2, you have to combine [style] and [inputStyle]:

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

If you use the attribute [multiple] =" true ", wrap the <p-autoComplete> </p-autoComplete> in a span with the class p-fluid

<span class="p-fluid">
    <p-autoComplete class="mdb-autocomplete" field="email" placeholder="Search user"
        [(ngModel)]="item_ac" [suggestions]="filterAC"[multiple]="true"
        [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" 
        (completeMethod)="onCompleteAC($event)" 
        (onSelect)="onSelectAC($event)" (onUnselect)="onUnselectAC($event)">
        <ng-template let-item_ac pTemplate="item">
            <div class="div-item-ac">
            
            </div>
        </ng-template>
    </p-autoComplete>
</span>

Answer 2

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!