Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.4k views
in Technique[技术] by (71.8m points)

html - How to give scrolling effect in datalist dropdown?

I am using HTML datalist to show various career paths but my number of options is too long . I wish to give it a scrolling effect. I have searched for it but only thing I found was CSS cannot be applied on datalist. Is it possible to apply styles on 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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Try this

.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 it helps! ;)

Update 1:

I hate inline styles, but let's try it to see if <datalist> accepts styles. Try this:

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...