Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(table): ensure scroll and pagination visibility on mobile #1828

Merged
merged 2 commits into from
Jun 3, 2024

Conversation

khaledOghli
Copy link

Description

This pull request addresses the visibility issues for table examples on mobile devices. Previously, the tables were not scrollable, causing pagination to be hidden and rendering the tables unusable on mobile screens.

Changes Made

  • Added flex-col and overflow-hidden classes to the parent element of table-example-columns-selectable.
  • Added flex-col and overflow-hidden classes to the parent element of table-example-searchable.
  • Added flex-col and overflow-hidden classes to the parent element of table-example-paginable.

Impact

These changes will allow users to scroll horizontally and view the pagination on mobile devices.

Before:
Screenshot 2024-06-02 at 1 48 05 PM

After:
Screenshot 2024-06-02 at 1 48 34 PM

…e examples.Resolved issues where some table examples were not scrollable on mobile and pagination was not visible.fixed by adding 'flex-col overflow-hidden' classes to parent elements.
@benjamincanac benjamincanac changed the title fix(docs): ensure scroll and pagination visibility for mobile in some table examples. docs(table): ensure scroll and pagination visibility on mobile Jun 3, 2024
@benjamincanac benjamincanac merged commit d66cfa9 into nuxt:dev Jun 3, 2024
2 checks passed
@benjamincanac
Copy link
Member

Thanks 😊

@khaledOghli
Copy link
Author

Hi @benjamincanac , I think still the Nuxt Content takes the old version it's not updated. can you check if it needs to build:docs.
I'm not sure about this issue in Nuxt Content.

Copy link
Member

Did you select nuxt/ui-edge in the top left corner? https://ui.nuxt.com/dev/components/table

@khaledOghli
Copy link
Author

Did you select nuxt/ui-edge in the top left corner? https://ui.nuxt.com/dev/components/table

Oh, I didn't notice for UI-edge. Thanks.🙏🏻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants