Column width not in sync with the headers of the report in report browser
The column width for the header is not in sync with the label for the header. It's changing according to the length of the value in the column.
Can you please suggest how to resolve this ?
Pegasystems Inc.
IN
Hello Sovan,
Thanks for posting your query in PSC :)
Have you hard coded the column width? Is the related post helpful at your end? If not, could you share the screenshots showing the configuration made and Pega version used.
Regards,
Rincy
OCBC
SG
Hi Rincy,
I haven't hard-coded the column width. I tried hard-coding the width but didn't work out.
I think this (https://community.pega.com/support/support-articles/cannot-set-custom-width-user-report-columns) might be the reason. We are using Pega 7.1.9.
PFA the config screenshots. Do let me know if anything else is required.
Regards,
Sovan
Pegasystems Inc.
IN
Hello Sovan,
As per below PDN article, last comment try to modify report styles:
OCBC
SG
Hi Shibani,
I tried your suggested approach but, while it is working fine for the column headers, it is truncating the data in the column.
PFA the screenshot. Can you have a SR raised for this? We need to resolve this defect immediately.
Regards,
Sovan
Pegasystems Inc.
US
Hi Sovan,
How do you expect the grid to behave? When the contents of the cell are larger than it can currently fit, should it increase in size indefinitely (possibly causing the report to scroll)? Or do you want the contents of the cells to wrap?
If you want the cells to wrap, this CSS should resolve your issue in most cases.
table.gridTable[pl_prop="pyReportContentPage.pxResults"] {
table-layout: fixed;
}
table.gridTable[pl_prop="pyReportContentPage.pxResults"] th {
overflow-x: hidden;
text-overflow: ellipsis;
height: auto;
}
table.gridTable[pl_prop="pyReportContentPage.pxResults"] td .oflowDivM{
text-overflow: ellipsis;
white-space: normal;
}
div.gridDefault div.divCont {
white-space: normal;
}
div.gridDefault div.oflowDiv {
height: auto !important;
}
But that won't work for long strings of text without spaces in them. This one will but the breaking behavior isn't as clean (it won't force breaking on spaces).
Hi Sovan,
How do you expect the grid to behave? When the contents of the cell are larger than it can currently fit, should it increase in size indefinitely (possibly causing the report to scroll)? Or do you want the contents of the cells to wrap?
If you want the cells to wrap, this CSS should resolve your issue in most cases.
table.gridTable[pl_prop="pyReportContentPage.pxResults"] {
table-layout: fixed;
}
table.gridTable[pl_prop="pyReportContentPage.pxResults"] th {
overflow-x: hidden;
text-overflow: ellipsis;
height: auto;
}
table.gridTable[pl_prop="pyReportContentPage.pxResults"] td .oflowDivM{
text-overflow: ellipsis;
white-space: normal;
}
div.gridDefault div.divCont {
white-space: normal;
}
div.gridDefault div.oflowDiv {
height: auto !important;
}
But that won't work for long strings of text without spaces in them. This one will but the breaking behavior isn't as clean (it won't force breaking on spaces).
table.gridTable[pl_prop="pyReportContentPage.pxResults"] {
table-layout: fixed;
}
table.gridTable[pl_prop="pyReportContentPage.pxResults"] th {
overflow-x: hidden;
text-overflow: ellipsis;
height: auto;
}
table.gridTable[pl_prop="pyReportContentPage.pxResults"] td .oflowDivM{
text-overflow: ellipsis;
white-space: normal;
word-break: break-all;
}
div.gridDefault div.divCont {
white-space: normal;
}
div.gridDefault div.oflowDiv {
height: auto !important;
}