Bullet points are not displayed as expected
SummaryDeveloper 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.
<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:
But on UI, bullet points are not displaying.
Rest of the text is showing correctly.
Error MessagesNot applicable
Steps to Reproduce1. 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 CauseAn 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.
ResolutionPerform 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