1

I'm new to Angular and I'm trying to change the width of a primeng auto complete component to fill the column of a table, I already tried to use

style="width: 100%"

but that doesn't work; I also tried to set this on html but nothing changes

[style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" class="p-autocomplete"

Current situation:

enter image description here

What I'm failing to do:

enter image description here

primeng version: 9.0.0

link for the the code: https://stackblitz.com/edit/primeng-tablebasic-demo-p9egw5?file=src/app/app.component.html

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Aryel Alves
  • 187
  • 1
  • 1
  • 13

3 Answers3

2

to me worked that way, font: https://github.com/primefaces/primeng/issues/1552

 <td>
    <div class="ui-fluid">
        <p-autoComplete 
           styleClass="wid100"
           [(ngModel)]="texts" 
           [suggestions]="results"
           (completeMethod)="search($event)" 
           [multiple]="true">
        </p-autoComplete>
    </div>
 </td>
Aryel Alves
  • 187
  • 1
  • 1
  • 13
1

My english is very poor but you can test this

<td class="p-fluid">
            <!-- <input type="text" style="width: 100%" /> -->
            <p-autoComplete [(ngModel)]="texts" [suggestions]="results" (completeMethod)="search($event)"
                [multiple]="true">
            </p-autoComplete>
</td>

I hope willbe helpful.

Juan Carlos Quiles Estruch
  • 175
  • 1
  • 14
  • its works on the code snippet but not on my project... maybe some primeng version issue, to work i have to add outher classes as the answer what i will post – Aryel Alves Nov 19 '20 at 15:03
0

Which browser do you use? As of Chrome its looks like expected enter image description here

Slava
  • 161
  • 1
  • 5