Summary

Error Messages

Steps to Reproduce

1. Upgrade Pega Platform 7.4 to Pega Platform 8.2.2.
2. Configure a dynamic layout such as, table-30-70 and table-70-30.
3. Include a chart in table-70.
4. Include a label or text in table-30.
5. Launch the portal.
   
   

Root Cause

Resolution

1. Remove the dynamic layout (provided for spacing).
2. Check the Reserve space checkbox in the Chart Presentation tab.
3. Add the below code in the UserWorkForm:
   
   <style>
     div[node_name="PATReportsWidget_1"] .content-item.content-layout.item-1.remove-top-spacing.remove-left-spacing.flex.flex-row {
       margin: 0px 0px 0px 0px !important;
       min-height: 0px !important;
   }
     div[node_name="PATReportsWidget_1"] .layout-content-inline_30_70_table > .item-1{
       margin-top:23px !important;
   }
     div[node_name="PATReportWidget_2"] .layout-content-inline_70_30_table > .item-2{
       margin-top: 20px !important;
    
     }
     div[node_name="PATReportWidget_2"] .content-item.content-layout.item-2.remove-top-spacing.remove-right-spacing.flex.flex-row {
       margin: 0px 0px 10px 0px;
       min-height: 0px;
   }
     div[node_name="PATReportWidget_2"] .layout-content-inline_70_30_table > .item-2 .remove-all-spacing.dataValueWrite{
       padding: 26px 0px 26px 0px;
     }
    div[node_name="PATReportWidget_5"] .content-item.content-layout.item-1.remove-top-spacing.remove-left-spacing.flex.flex-row,
     div[node_name="PATReportWidget_5"] .content-item.content-layout.item-2
     {
       margin: 0px 0px 0px -5px !important;
       min-height: 0px !important;
   }
     div[node_name="PATReportWidget_3"] .content-item.content-layout.item-1.remove-top-spacing.remove-left-spacing.flex.flex-row,
     div[node_name="PATReportWidget_3"] .content-item.content-layout.item-2.remove-bottom-spacing.remove-right-spacing.flex.flex-row {
       margin: 0px 0px 10px 5px;
       min-height: 0px;
   } 
     div[node_name='PATReportsSection'] > .layout > .layout-body > .content > .content-item.content-layout.item-1.flex.flex-row,
     div[node_name='PATReportsSection'] > .layout > .layout-body > .content > .content-item.content-layout.item-2.flex.flex-row{
       margin: -15px 0px 0px 0px !important;
     }
     div[node_name="PATReportWidget_3"] .item-1 > .layout.layout-noheader.layout-noheader-case_secondary_content{
           background-color: #f2f2f2;
     }
     </style>