Clever Geek Handbook

How do I give the effect of scrolling through the directory dropdown?

I am using HTML datalist to show different career paths, but there are too many options. I want to give it a scroll effect. I searched for it, but only I found that CSS cannot be applied to datalist. Is it possible to style a datalist using jQuery?

Here is my HTML markup:

<input class="form-control searchbar" #input (input)="filterdata(input.value)" [(ngModel)]="homesearch" id="home_ssearch" name="careerr" list="careers" placeholder="Discover more about any career you like" />
<div>
        <datalist class="datalist" id="careers" >
          <option *ngFor = "let career of carrerpathList" value="{{career.title}}" ></option>         
        </datalist>
</div>
+7


source to share


3 answers


try it

.scrollable {
  overflow-y: auto !important;  // Use !important only if there is already an overflow style rule for this element and you want to override
}

And just apply it like this:

<datalist class="datalist scrollable" id="careers" >
     <option *ngFor = "let career of carrerpathList" value="{{career.title}}" ></option>         
</datalist>


Hope this helps!;)

Update 1:

I hate inline styles, but I'll try to see if <datalist>

styles are accepted . Try the following:

<datalist class="datalist scrollable" id="careers" style="overflow-y: auto!important">
0


source


try this:



.datalist {
   height:50px !important;
   max-height:80px !important;
   overflow-y:auto;
   display:block !important;
}
0


source


This simple approach works for me:

datalist {
    max-height: 500px;
    overflow-y: auto;
}

Note: this CSS will apply the scroll effect to all <datalist>

-1


source






More articles:


All Articles