Skip to main content

This content has been archived and is no longer being updated. Links may not function; however, this content may be relevant to outdated versions of the product.

Support Article

Styling icon issue with standard header

SA-62455

Summary



Section header bar does not display the Expand or Collapse icon when using a custom icon. The icon truncates the beginning of the label icon and a down-carat also displays. This occurs after migrating from PRPC 6.1 SP2 to Pega 7.3.1.


Error Messages



Not Applicable


Steps to Reproduce

  1. Log in to Designer Studio with Pega Smart Investigate application.
  2. Open SIENDUSER skin rule > Container > Standard.
  3. Modify the Collapsed or Expanded border with type as image.
  4. Add custom icons. Verify the header icon and text at runtime.

Root Cause



The default icons are displayed from the font-icon. The pyenduser skin is overwritten or the stylesheets (py-icons) included in the out-of-the-box pyEndUser skin rule which has the font icon, then they are they are not overwritten with custom icons.


Resolution



Perform the following local-change:

Add the below script in the UserWorkForm.

div.layout-outline-combo_group > .Expanded > .header-bar > * > .icon-openclose::before,
div.layout-outline-combo_group > .Collapsed > .header-bar > * > .icon-openclose::before{
  content:"";
  
}
  div.layout-outline-combo_group > .Expanded > .header-bar > * > .icon-openclose{
  background-image:url('webwb/h1expand_theme.gif');
    padding: 0px;
    width:27px;
}
   
div.layout-outline-combo_group > .Collapsed > .header-bar > * > .icon-openclose{
  background-image:url('webwb/h1collapsed_theme.gif');
padding: 0px;
    width:27px;
}

To add any custom image as an icon for the layout formats, replace the combo_group text in the above script with the format name and add the URL of the icon.


 

Published February 23, 2019 - Updated October 8, 2020

Was this useful?

0% found this useful

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us