HTML의 맨 아래 입력에 datalist 만 표시하는 방법

Question

데이터 목록에 select를 사용합니다. 그러나 나는 문제가있다. 내 데이터리스트가 입력 맨 위에 표시되면 데이터리스트에서 스크롤 할 수 없습니다. 그러나 데이터 얼라이언스가 바닥에있을 때는 발생하지 않습니다.

<input type="search" placeholder="{{'COMPONENT_PROPERTIES.SEARCH_ICON' | translate}}" 
       ng-model="icon.name" 
       list="classIcon" 
       id="searchIcon" 
       ng-change="changeFn(icon.name)"> 
     <datalist id="classIcon" class="scroll" > 
      <select class="selectIcon"> 
       <option ng-repeat="icon in classService.classesAwesome " 
         value="{{icon}}" 
         ng-bind-html="icon | highlight: $parent.icon.name "> 
        <i class="{{icon}}"></i> &nbsp; 
        <span ng-bind-html="icon | highlight: $parent.icon.name "></span> 
       </option> 
      </select> 
     </datalist> 

Answer 1

당신은 당신의 CSS에이 코드를 추가해야합니다 : 다음은 내 코드입니다.

.dropdown1 { 
width:290px; 
overflow:scroll; 
height: 20px; 
}