cfpb / design-manual

⚠️ THIS REPO IS DEPRECATED ⚠️ A set of design principles and standards for the Consumer Financial Protection Bureau.
https://cfpb.github.io/design-manual/
Creative Commons Zero v1.0 Universal
98 stars 71 forks source link

Tables documentation page: table pagination display is broken #617

Open marteki opened 5 years ago

marteki commented 5 years ago

On the documentation page for Tables, the table pagination example doesn't appear properly: the "Newer" and "Older" buttons don't scale, and they instead overlap the "Page" label and the "Go" button.

I think this is less a problem with the actual pagination component, and more an issue with the way the Design Manual page is laid out. I believe that the wider desktop view of the table is being shown because the whole page is wider, even though the table only fills up a column on the page. Is there a way we could show the table pagination more as it's intended to be seen on a production web page?

screen shot 2018-11-06 at 11 23 51 am

cfarm commented 5 years ago

do you have an example of this in production?

anselmbradford commented 5 years ago

The only filterable table I know of is https://www.consumerfinance.gov/activity-log/, which does not have this issue.

jimmynotjim commented 5 years ago

I think this is less a problem with the actual pagination component, and more an issue with the way the Design Manual page is laid out

Yep, you're right on the money. Only solution I have found is to put the table inside an iframe (this is what storybook does).