3

I am trying to display a Terms of Service component in lightning. The client needs to be able to change the body of the ToS, so we are passing it as a raw string from Apex. If I pass the following string (and I can confirm it is received as-is within the component):

This is a list.
<ul>
<li>item1</li>
<li>item2</li>
</ul>
<p>and some text</p>

and try to render it with

<aura:unescapedHtml value="{!v.fieldBody}" />

the result is just the inner text of each element rendered on a separate line without bullet points. <b> tags and <p> tags seem to render the same way they would with html.

Why is aura:unescapedHtml not rendering my unordered list?

  • This github.com/forcedotcom/aura/blob/… and this github.com/forcedotcom/aura/blob/… look like they should work. Does wrapping the first line in <p>...</p> make any difference? – Keith C Jun 22 '17 at 20:14
  • I think you need to add the slds class for the bullet point list. Can remember exactly but something like slds-list--bullet. Since by default ul is rendered without bullets, numbers, etc – Eric Jun 22 '17 at 20:16
  • I did try several things I didn't bother to show here, wrapping the first line with <p> being one, wrapping everything in <div>, etc. but couldn't get it to work. – SoZettaSho Jun 22 '17 at 20:20
  • @Eric Yes, I added class="slds-list--dotted" and it worked! Is there a reason why regular <ul> doesn't work? The documentation seems to be a bit misleading on this one – SoZettaSho Jun 22 '17 at 20:21
  • The CSS is based on the lightning design system so by default it renders without those. Added as answer – Eric Jun 22 '17 at 20:23
5

You need to add the slds class for the bullet point list. Can remember exactly but something like slds-list--bulletdotted. Since by default ul is rendered without bullets, numbers, etc

  • Yes the class was slds-list--dotted. Thanks! – SoZettaSho Jun 22 '17 at 20:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.