Support Article
Expand icons revert to default
SA-31774
Summary
Developer has customized 'Expand All' icon and they have used the following icon pi pi-arrows-ne-sw-separate.
This icon displays fine but on clicking it, the icon doesn't change to the join equivalent (pi pi-arrows-ne-sw-join).
If they click again (to collapse) it then defaults back to the out of the box expand and collapse icons.
The actual expand functionality is working throughout the application, it is just the icon for this functionality which seems to be impacted.
Error Messages
Not applicable
Steps to Reproduce
Create an Icon and configure "expand or collapse" action on onClick .
Root Cause
A defect in Pegasystems’ code or rules.
When user click the icon with the action “Expand/Collapse”, the JS that gets executed is the function toggleExpandCollapse in the rule pzpega_ui_doc_expandCollapse. In this script the class “iconExpandAll” and “iconCollapseAll” are explicitly set.
Resolution
Perform the following local-change:
1. Create a custom css for the application skin.
2. Write the below code in the css file as shown below:
.iconAppendRow:before,
.iconAppendRow_on:before,
.iconAppendRow_disabled:before,
.iconExpandAll:before,
.iconExpandAll_on:before,
.iconExpandAll_disabled:before {
content: "\e0c1"; /* .pi-arrows-ne-sw-separate */
}
.iconCollapseAll:before,
.iconCollapseAll_on:before,
.iconCollapseAll_disabled:before {
content: "\e0c2"; /* .pi-arrows-ne-sw-join */
}
Published December 28, 2016 - Updated October 8, 2020
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.