enter image description here

enter image description here

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
vidya 19 Ноя 2021 в 18:43
Предоставьте образец кода stackblitz для давай отладим
 – 
Alex Yu
19 Ноя 2021 в 19:14
@AlexYu, я добавил stackblitz. пожалуйста, посмотри
 – 
vidya
20 Ноя 2021 в 08:14
Удалите или прокомментируйте padding-bottom: 40px !important; и проверьте, может ли это решит вашу проблему
 – 
Kiran Mistry
20 Ноя 2021 в 08:21
Нет, не работает @KiranMistry
 – 
vidya
20 Ноя 2021 в 08:27
Пожалуйста, проверьте мой пост / ответ ниже
 – 
Kiran Mistry
20 Ноя 2021 в 08:51

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
}
2
Kiran Mistry 20 Ноя 2021 в 08:50
Это сработало. Большое спасибо..
 – 
vidya
20 Ноя 2021 в 09:15