UI overlap when using Table Layout in 8.4 - Theme-Cosmos

We have a requirement whereby our case type would report a list of all the transactions for the day, (Report-> Repeating List of Transactions). As the report contains many transactions, we would like to have the pagination functionality incorporated, to be able to navigate back and forth to get to the intended transaction for better accessibility to the users. Therefore, we have considered using “Table layout” to achieve UI needs. However, using Table layout within the template offered by Theme-Cosmos (Section: pyCaseMainInner), we see that the sections on the right-hand side (Attachments, Tags etc.) is getting overlapped with the table content in the main workarea. As an alternative approach, we have tried Repeating Dynamic Layout, however this does not offer as many pagination options as Table layout does.

I have enclosed snapshot of the overlapping issue.

Can anyone please let us know how can we achieve the requirement at hand w.r.t to pagination following best/low-code practices in 8.4.4

Pega Version: Pega 8.4.4

Browsers used: Chrome, IE, Mozilla & Edge

@vinaysista try to wrap the table in a default container format. If you open the section that contain the table in dev studio, you should be able to change the setting

@RichardMarsot Hi Richard, Greetings. I have wrapped the table which is in a layout in a default container format however i still see the table getting overlapped with Files and Documents. Please see below

@KOMARINA the link label is the issue - it does not have word wrap - Have you checked the word wrap setting on the cell that contains the link? If this is not helping, see if using a helper class to wrap the link works

It’s most important for link text to make sense without the surrounding sentences or content. The link text alone should convey the function and purpose of the link. Link text should also be unique and easy to speak out loud.

my recommendation is to not use the url in the label but a meaning full text (not ‘click here’)

This is a link to a relevant article on how to define the link text

@RichardMarsot Thank you Richard, User should have the option to edit the URL, hence i have to add that as a column and i have the Wrap Text enabled, without which i see like below

@KOMARINA wrap text will not work because your link is a single word - you need to use a helper class on the link that is going to do set the word-break: break-all to the content of the link or set a max-width

again - I do recommend to not put the link in the label - but use a readable label - see my response above

@RichardMarsot Thank You Richard, the word-break worked for me and there is no screen distortion.