Log in to AnswerLog in to Follow
Somesh Renganathan
16Views
6Comments
Solved
Pagination Numbers Overflowing Out of Container
Question
Reactive
Application Type
Reactive

I'm using default table widget and pagination component from OutSystems UI to display data. Since the data goes to be around millions and using pagination to display 50 records on each page., The pagination numbers easily goes upto lakh. In such cases, the number just overflows outside the container, giving a bad UI experience. Is there any way to make the container grow big enough to hold 5 or 6 digits?

0
0
on 24th Mar
Grace Tamayo
Solution

.pagination-button {

    width: auto;

    padding-left: 10px;

    padding-right: 10px;

}

You may change the last part of the pagination-button class to something like this so that it would always adjust the width of the button no matter how long the page number is. It would look something like this.

See solution in context
3
0
on 31th Mar

Create a class .pagination-button in your screen and define your desired width:

.pagination-button { 

width: 80px;

}

2
0
on 24th Mar

But, would that make the container holding single digits big?

0
0
on 24th Mar

Replying to Somesh Renganathan's comment on 24 Mar 2021 17:01:52

Yes, if you want different size per container you must calculate dinamically depending on the length of the page number.

1
0
on 24th Mar
Benjith Sam
mvp_badge
MVP

Hi Somesh,

For the mentioned use-case, I would suggest you to go with Table + navigation with text input implemenation.

See this sample screen CustomTablePaginationDemo

  • I have cloned the Pagination widget from OutSystemsUI module
  • For ease in use, I have introduced additional two controls/button i.e. GoToFirst and GoToLast button
  • Such implemenation won't break the pagination UI even though the pagination number is large


Hope this helps you!


Kind regards,

Benjith Sam

RWALabCustomPaginationDemo.oml

1
0
on 24th Mar

Hi Somesh,

Not an answer to your question, but from point of view of UX, having thousands of pages to choose from and only having 4 pages + the very last directly adressable is not very usefull.

So you can make it look slightly better, but is still a unsatisfying interaction. 

Dorine

1
0
on 24th Mar
Grace Tamayo
Solution

.pagination-button {

    width: auto;

    padding-left: 10px;

    padding-right: 10px;

}

You may change the last part of the pagination-button class to something like this so that it would always adjust the width of the button no matter how long the page number is. It would look something like this.

3
0
on 31th Mar
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.