Reputation: 9549
I'm working on an Angular 8.0.0 project using "@angular/material": "8.0.1"
For the mat-paginator there are per-page options [5, 10, 20, 50, 100]
When selecting any of the options, the dropdown works effectively as it automatically calculates the position of the dropdown to be positioned under the select (the default behavior), if there is no space left, the dropdown is positioned on top of the select.
Now just for the last option [100], the dropdown goes down which make half of it out of the viewport
And even when testing with [5, 10, 20, 50, 51] the dropdown also goes down only with [51]
Now with [5, 10, 20, 50, 51, 100, 200], the dropdown goes down just with [200]
The space available under the select itself is the exact same for all options more than [5]
Now to sum up, with the same data, with any combination of options, the last opsion will always reproduce the problem.
Here are some screenshot:
Upvotes: 1
Views: 120