App.component.html:
<div class="col-12 p-0">
<mat-paginator class="paginator col-12" (page)="pageEvent =
getServerData($event)"
[length]="totalRecords"
[pageSize]="search.size"
[pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons>
</mat-paginator>
</div>
App.component.ts:
::ng-deep .mat-select-panel-wrap {
flex-basis: 100%;
padding-bottom: 40px !important;
padding-left: 12px !important;
}
Когда я выбираю 10,20,50, mat-select работал нормально, и даже после выбора 100 он отображает 100 строк. Но когда значение select было на 100, и я пытаюсь выбрать mat-select, шел выше, как показано в изображение.
https://stackblitz.com/edit/angular-mat-paginator-jhx2jf?file=app/table-pagination-example.ts
Спасибо.
1 ответ
Здравствуйте, я обнаружил вашу проблему, проблема в том, что cdk-overlay-pane
применяет собственный CSS, поэтому вам нужно добавить CSS для этого.
Добавить код стиля в Style.css
.cdk-overlay-pane{
min-width: 56px;
pointer-events: auto;
font-size: 12px;
bottom: 20.6875px;
left: 133.391px;
transform: translateX(0px) translateY(0px) !important; // set 0px for X and Y
}
Похожие вопросы
Новые вопросы
angular
Вопросы об Angular (не путать с AngularJS), веб-фреймворке от Google. Используйте этот тег для вопросов Angular, которые не относятся к отдельной версии. Для более старой веб-инфраструктуры AngularJS (1.x) используйте тег AngularJS.
padding-bottom: 40px !important;
и проверьте, может ли это решит вашу проблему