predixdesignsystem / px-data-grid

Predix UI component which defines a data grid
https://www.predix-ui.com/#/elements/px-data-grid
Apache License 2.0
12 stars 20 forks source link

Pagination: Current page indication box is not appropriate #792

Closed usharanitalatala closed 6 years ago

usharanitalatala commented 6 years ago

Hi,

If the total number of pages are more than 100, current page indicator border is inside. Its better to give padding to the button instead of width and height.

capture

davidrleonard commented 6 years ago

v1.0.2 attempts to fix this specific case by changing the button to use outline instead of border, which gives the number a bit more room. I tested 558 and it is tight, but it fits. It won't work for numbers over 1000.

Its better to give padding to the button instead of width and height.

We can't allow the page buttons to dynamically size themselves and use padding. We have to use a static width for each button (20px) so we can programmatically determine which numbers should be visible and insert appropriate ellipses. There's no way to recreate this specific functionality using CSS alone, which would allow us to have dynamically sized buttons. Hence the static width.

usharanitalatala commented 6 years ago

Thank you David for the detailed explanation and the fix.