CODEWITHSUNDEEP
htmlcssangular
neelam
neelam

Reputation: 151

Apply css to datalist tag in angular

I have an input search box with autocompletion where I am displaying array of names. I am using datalist tag. When sme names are typed in search text box it will give names present in the array. I am unable to change css of the array shown in dropdown.

my component.html

<input type="text" placeholder="select name"  (keyup)="arrayList($event.target.value)"
id="nameId" list="nameOptions"  formControlName="name">
<datalist id="nameOptions">
<option *ngFor="let name of names | async" [value]="name">
{{name}}
 </option>
</datalist>

I am trying to apply css as follows

my component.css file

datalist{
 position:absolute;
 max-height:50px;
 overflow-x:hidden;
 overflow-y:scroll
 }

Right now it is showing like below Below picture shows drop down list of array when we type in search text box

Upvotes: 0

Views: 348

Answers (1)

Santosh
Santosh

Reputation: 3837

Try to use

::ng-deep datalist{
     position:absolute;
     max-height:50px;
     overflow-x:hidden;
     overflow-y:scroll
 }

Upvotes: 1

Related Questions