halstack-react icon indicating copy to clipboard operation
halstack-react copied to clipboard

Responsive in pagination component

Open Sr44102 opened this issue 3 years ago • 4 comments

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.

Sr44102 avatar Dec 02 '22 12:12 Sr44102

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!

GomezIvann avatar Jan 09 '23 12:01 GomezIvann

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.

rconcepcion3 avatar Jan 08 '24 03:01 rconcepcion3

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] avatar Feb 16 '24 01:02 github-actions[bot]

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] avatar Mar 06 '24 01:03 github-actions[bot]