Page 1 of 1

p-autoComplete not displaying entire input field

Posted: 08 May 2019, 22:17
by Bosies
I am currently to insert a PrimeNG autocomplete as a search bar in a project. I currently have this:

Code: Select all

  <span>Search </span>
  <p-autoComplete [(ngModel)]="name" [suggestions]="filteredNames" [minLength]="1" placeholder="&#xF002;" 
    (completeMethod)="findCustomer($event)" [size]="30"></p-autoComplete>
However, in my web page, I see this: https://imgur.com/a/a4LTPEq

My main issue is why the input section for autoComplete is not showing by default since I have no personal CSS to style this. I tried adding a magnifying glass placeholder to show the user where the search bar is, but after I click on the search bar, the cursor is placed at the beginning next to the magnifying glass.

With limited documentation on autoComplete styling on the PrimeNG page, I would like some help to fix these issues. Thanks.

Re: p-autoComplete not displaying entire input field

Posted: 31 May 2019, 13:17
by yigitfindikli
Bosies wrote:
08 May 2019, 22:17
I am currently to insert a PrimeNG autocomplete as a search bar in a project. I currently have this:

Code: Select all

  <span>Search </span>
  <p-autoComplete [(ngModel)]="name" [suggestions]="filteredNames" [minLength]="1" placeholder="&#xF002;" 
    (completeMethod)="findCustomer($event)" [size]="30"></p-autoComplete>
However, in my web page, I see this: https://imgur.com/a/a4LTPEq

My main issue is why the input section for autoComplete is not showing by default since I have no personal CSS to style this. I tried adding a magnifying glass placeholder to show the user where the search bar is, but after I click on the search bar, the cursor is placed at the beginning next to the magnifying glass.

With limited documentation on autoComplete styling on the PrimeNG page, I would like some help to fix these issues. Thanks.
Hi,
Can you provide sample with https://stackblitz.com/github/primeface ... e-template .