Support Article

Bullet points are not displayed as expected

SA-31372

Summary



Developer has HTML markup shown below in a property called ProductOverview and was referring this property in paragraph rule which in turn was used in a section to display the content in UI.

Example HTML:

<ul><li>6% cash back at U.S. supermarkets on up to $6,000 per year in purchases then it's 1%</li><li>3% cash back at U.S. gas stations</li><li> 3% cash back at select U.S. department stores</li><li>1% cash back on other purchases</li></ul>
Cash back is provided in the form of Reward Dollars that can be redeemed as a statement credit.

<b>Additional Terms and Limitations apply.</b>

Code developer used in paragraph rule:
<%out.println(tools.getProperty(".ProductOverview").getStringValue());%>

But on UI, bullet points are not displaying.
Rest of the text is showing correctly.


Error Messages



Not applicable


Steps to Reproduce



1. Use html code shown above in field called ProductOverview.
2. Refer property in a paragraph rule like <%out.println(tools.getProperty(".ProductOverview").getStringValue());%>.
3. Include the paragraph rule in a section.
4. Run the flow to preview the output of the property.

5. Text of product overview property shows correctly without the bullets.


Root Cause



An issue in the custom application skin.

Use of  Out-of-the-box skin revealed that bullets were appearing.

Comparing custom skin with out of the box skin revealed that custom skin had margin-left as 0 pixel. Using the value as 15 px as seen in out of the box skin showed bullets.





Resolution



Perform the following local-change: 

1. Requested developer to reference the property like below in the section:
 <pega:reference name = ".ProductOverview" mode = "richtext"/>
2. Include a value of 15 px for margin-left of Ul element.
 

 

Published December 13, 2016 - Updated December 20, 2016

Have a question? Get answers now.

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