i am using syncfusion pager, dropdownlist in our application please open the below link.
https://stackblitz.com/edit/angular-nv6myv?file=src%2Fapp%2Fapp.component.html
data will change based on the number of items selected from dropdown. after selecting the 20 items from drop down go to bottom of the page by scrolling. drop down list is showing bottom of the drop down box. but i want to show dropdown list items always top of the dropdown box.
Please provide any solution.
i just saw your code on your link, and i tried this:
<div class="container-fluid">
<div class="card" *ngFor="let student of tempArray">
<div class='card-body'>
<p class="text-truncate">{{student.name}} {{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>
what i did here is that i put the list items and the drop down box on a separate card.
it's a little messy, just please arrange the indentions.
In the dropdownlist open event, you can get the popupHight and set a negative value into popup offsetY property, refer to below code.
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);
}
This will open the popup in the top.
#div_top { z-index:9; }#div_bottom{ z-index:-1; }– kapitan