Reactive Pagination Formatting

Hi community,

I have a list with pagination in a reactive application. It lives in a block instantiated with a set width of about 430px. At pages 1-3 it looks fine, but beyond that the numbers begin stacking. Any suggestions for how I can fix this?

Thanks!

Kristi

Hello Kristi,

Most likely, the problem is related with the fixed width. Did you try to instantiate the block with a larger value just to see if the problem persists?


Kind regards,

Rui Barradas

Rui Barradas wrote:

Hello Kristi,

Most likely, the problem is related with the fixed width. Did you try to instantiate the block with a larger value just to see if the problem persists?


Kind regards,

Rui Barradas

 Yes, I have the same list on a different screen spanning double this width. I recognized that's probably the issue, but I was hoping for some customization I could possibly apply to the pagination - for instance, can I specify how many "page boxes" I want displayed? Or can I fix that number 5 wrapping? 

 

Hello Kristi,


You can tweak the default CSS of Pagination widget by defining your own class and overwriting existing one.

On this way you will be able to display all the page boxes with smaller size which will fit in your desired space.

Follow below steps to achieve it :

1. Enclose your navigation widget inside a container and adjust container's size(width & hight) from style property.

2.  Also adjust size font size in container ->


3. Open the Style sheet editor by clicking CSS from top ->

4. Below is the default navigation widget size :

Browser output with default CSS :

5. Create and Apply this below CSS class in Screen UI(You can adjust size as per your requirement) :

In The OS Service studio :

Output in browser :

On this way you can get all page boxes in same container and it solves your issue.

Hope it helps!


Regards,

Sanjay