how to set scroll & caret up and down animation for long dropdown in Angular

问题: here i have a issue i am generating a dynamic dropdown and trying to set the scroll for dropdown using Overflow-y:auto in some scenario people are suggesting to use size="5...

问题:

here i have a issue i am generating a dynamic dropdown and trying to set the scroll for dropdown using Overflow-y:auto in some scenario people are suggesting to use size="5" some number but thats works for long selection box not for dropdown.

1.How can I set scroll for dropdown ?
2.How can I set caret up n down for down ?

<select>
  <option value="none" disabled >Select Data</option>
  <option *ngFor="let data of dropdownData">{{data.name}}</option>
</select>

enter image description here

stackblitz url : https://stackblitz.com/edit/angular-mirzns


回答1:

Select needs to have both overflows to set to auto and its size defined with size attribute in the HTML, and with height and width in the CSS. That will make you sure to have a scrollable element. If you wish to have the scrollbar always show, then use CSS pseudo-elements to style the scrollbar.

HTML:

<select size="{{dropdownData.length+2}}"> // important
  <option value="none" disabled >Select Data</option>
  <option *ngFor="let data of dropdownData">{{data.name}}</option>
</select>

CSS:

select{
  overflow: auto ;
  width:6em;
  max-height: 6em
}

select::-webkit-scrollbar {
    -webkit-appearance: none;
}

select::-webkit-scrollbar:vertical {
    width: 0.5em;
}

select::-webkit-scrollbar:horizontal {
    height: 0.5em;
}
select:not(:empty)::-webkit-scrollbar-thumb {
    border-radius: 0.25em;
    background-color: grey;
}

Demo

  • 发表于 2019-01-23 02:49
  • 阅读 ( 185 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除