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?

5
  • 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, 2017 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, 2017 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, 2017 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, 2017 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, 2017 at 20:23

1 Answer 1

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

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .