Pagination Numbers Overflowing Out of Container
Question
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?

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.

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

.pagination-button { 

width: 80px;

}

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

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

mvp_badge
MVP

Hi Somesh,

For the mentioned use-case, I would suggest you to go with Tablenavigation 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

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

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.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.