search

dxc-technology / halstack-react

Library of components for building SPAs with React and Halstack Design System
https://developer.dxc.com/halstack/
Apache License 2.0
15 stars 14 forks source link

Responsive in pagination component #1404

Open Sr44102 opened 1 year ago

Sr44102 commented 1 year ago

Describe the bug When the pagination component is viewed in mobile screen the UI is distorted.

To Reproduce View in mobile screens, I have attached the sample screenshot.

Screenshots image

UI Issues

  1. The items per page component in the pagination is outside the viewport.
  2. The text “1 to 10 of 27” is not properly wrapped.
  3. The “Next”, “Previous”, “First” and “Last” buttons are just rectangle boxes.

Add labels We are from Assure Reinsurance team, while testing tables and pagination in mobile view we came across this above issue.

GomezIvann commented 1 year ago

Hi @Sr44102,

Your proposal is fair enough, we will study and review the Paginator component to try to fix and improve how it looks in responsive mode.

Thanks for the feedback!

rconcepcion3 commented 7 months ago

We can try using line breaks to accommodate smaller widths. As the screen gets smaller, sections continue breaking into smaller groups until a minimum width is achieved.

image

I will log this approach for further exploration in Jira.

github-actions[bot] commented 6 months ago

This issue is stale because it has been open for 15 days with no activity. If there are no further updates or modifications within the next 15 days, it will be automatically closed.

github-actions[bot] commented 6 months ago

This issue is stale because it has been open for 15 days with no activity. If there are no further updates or modifications within the next 15 days, it will be automatically closed.