Support Article
Dynamic layouts not responsive in IE browser
Summary
Post upgrade to Pega 7.4, free-form layouts are converted to dynamic layouts to achieve Responsive UI. However, the UI is not responsive in the Internet Explorer browser.
Error Messages
Not Applicable
Steps to Reproduce
- Upgrade PRPC 6.3 to Pega 7.4.
- Build a section with dynamic layouts, nested dynamic layouts, and grids.
- Create a case and navigate till the above section is reached.
- Reduce the width of the browser window. The fields in the section contained in the dynamic layout adjust based on the screen width. Dynamic layouts are responsive in the Chrome browser but not in the Internet Explorer browser.
Root Cause
The harness body scrollbar stylesheet properties were not present in the Internet Explorer browser.
Resolution
Perform the following local-change:
Include the below code in the UserWorkForm:
<style>
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body.harnessBody{
overflow-x: scroll !important;
}
.flex.screen-layout-header{
display: block;
}
div[node_name="ApplyFilteronFAWB"] .layout .layout-body{
width: 100% !important;
}
div[node_name="CRDPlansWBAssignments"] .gridTable tbody tr td:nth-child(2).mainGridTableCell,
div[node_name="ResolveWA"] .gridTable tbody tr td:nth-child(2).mainGridTableCell,
div[node_name="pzRRListBodyRK"] .gridTable tbody tr td:nth-child(2).mainGridTableCell,
div[node_name="pzRRListBodyWithoutPaginationRK"] .gridTable tbody tr td:nth-child(2).mainGridTableCell {
max-width: 400px;
}
div[node_name="CRDPlansWBAssignments"] .gridTable tbody tr td:nth-child(2).mainGridTableCell #gridBody_right,
div[node_name="ResolveWA"] .gridTable tbody tr td:nth-child(2).mainGridTableCell #gridBody_right,
div[node_name="pzRRListBodyRK"] .gridTable tbody tr td:nth-child(2).mainGridTableCell #gridBody_right,
div[node_name="pzRRListBodyWithoutPaginationRK"] .gridTable tbody tr td:nth-child(2).mainGridTableCell #gridBody_right {
overflow-x: scroll;
}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (min-width: 100px) and (max-width: 1000px) {
.ie11 table.ie-table-fix{
width: auto !important;
}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (min-width: 1001px) and (max-width: 10000px) {
.ie11 table.ie-table-fix{
width: 100% !important;
}
}
</style>
Published March 20, 2019 - Updated December 2, 2021
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.