如何在下拉框顶部显示下拉列表（始终）答案

【问题标题】：how to show drop down list on top of drop down box (always)如何在下拉框顶部显示下拉列表（始终）
【发布时间】：2019-07-02 10:43:43
【问题描述】：

我在我们的应用程序中使用同步融合寻呼机，下拉列表请打开以下链接。

https://stackblitz.com/edit/angular-nv6myv?file=src%2Fapp%2Fapp.component.html

数据将根据从下拉列表中选择的项目数量而变化。从下拉列表中选择 20 个项目后，滚动到页面底部。下拉列表显示下拉框的底部。但我想始终在下拉框顶部显示下拉列表项。

请提供任何解决方案。

【问题讨论】：

不能用z-index修复吗？
我不知道如何实现z-index请提供解决方案
这是一个css属性，其中div可以排列在谁的顶部和谁的底部。只需获取 div 的 id，例如：#div_top { z-index:9; }#div_bottom{ z-index:-1; }
抱歉，@kapitan 不工作
我刚刚在您的链接上看到了您的代码，我建议将您的列表项放在 card-body 标签内，然后将您的下拉 div 放在 card-footer 标签上。这里有一些帮助：bootstrap-header-and-footer

标签： css angular syncfusion

【解决方案1】：

我刚刚在您的链接上看到了您的代码，我尝试了这个：

    <div class="container-fluid">
    <div class="card" *ngFor="let student of tempArray">
    <div class='card-body'>
        <p class="text-truncate">{{student.name}} &nbsp; &nbsp; {{student.standard}}</p>    
    </div>    
    </div>
<br/><br/><br/><br/><br/>
  <div class='card'>
    <div class='card-body'>
      <div class="fixed-footer" *ngIf="students.length > paginationData[0].value">
<ejs-pager  [pageCount]="3" [pageSize]="value" (click)="selectedPage($event)"
 [totalRecordsCount]='students.length'></ejs-pager>
<ejs-dropdownlist [dataSource]="paginationData" [fields]="fields" (change)="valueChange($event)" [popupHeight]=150 [value]="value"></ejs-dropdownlist>
</div></div>
    </div>
</div>

我在这里所做的是将列表项和下拉框放在单独的卡片上。

有点乱，请把缩进安排一下。

【讨论】：

【解决方案2】：

在下拉列表打开事件中，您可以获取popupHight并将一个负值设置为popup offsetY属性，参考下面的代码。

onddlPopupOpen(event: PopupEventArgs, ddlObj) {
    event.popup.offsetY = -(parseInt(ddlObj.popupHeight));
    event.popup.collision = { X: 'fit', Y: 'fit' };
    event.popup.dataBind();
    event.popup.refreshPosition(ddlObj.element, false);
}

这将在顶部打开弹出窗口。

Sample

【讨论】：