Fix: Paginator positioning and alignment for full page tables isn't correct #2517
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #2517 +/- ##
=======================================
Coverage 82.99% 82.99%
=======================================
Files 925 925
Lines 20636 20636
Branches 3260 3260
=======================================
Hits 17127 17127
Misses 3389 3389
Partials 120 120 ☔ View full report in Codecov by Sentry. |
| @@ -262,7 +261,7 @@ import { CsvFileName } from '../download-file/service/file-download.service'; | |||
| <div | |||
| class="pagination-controls" | |||
| *ngIf="this.pageable" | |||
| [style.position]="!this.showFloatingPaginator ? (this.isTableFullPage ? 'fixed' : 'sticky') : ''" | |||
| [style.position]="!this.showFloatingPaginator ? 'sticky' : ''" | |||
There was a problem hiding this comment.
@aneeshsharma For a full-page table, after this change, does the paginator still stay at the same place when we scroll? Just want to make sure we are at parity with the existing use-case.
There was a problem hiding this comment.
Yep, with this change the paginator would go at the bottom of the table in case of a full page table and an embedded table.
If the height of the table is not enough to accommodate all the rows, we get scrolling inside the table as was before with embedded table, while the pagination element is fixed w.r.t the table. If the table height is enough, the pagination element stays at the bottom of the table (without scrolling since all the rows are visible).
There was a problem hiding this comment.
Okay, then we can't make this change. We need to support existing behavior. Could you please come up with another solution to solve the alignment problem while ensuring the Paginator is not scrolled away?
Description
Pagination element for full page tables was positioned as
fixed. Which meant if thewidthwas set to100%, it will take the width of the viewport and not the width of the parent table.This leads to the positioning of the element being incorrect as well as alignment being off.
Solution is to make the pagination element
position: sticky, that waywidth: 100%takes the width of the parent table and not the viewport.This does mean that full page tables and embedded tables are now not different in terms of pagination.
Testing
I tested a few configurations of tables manually, as well as ran unit tests to make sure nothing is breaking with the change.