<< Salesforce Lightning Design System (SLDS) Activity Component and z-index | Home | Salesforce week 18 >>

Using preformatted HTML in a Salesforce Lightning Component

Had to output preformatted HTML richtext from a richtext field in a Lighting Component the other day. Looking through the documentation I found the ui:outputRichText component but it didn't really work the way it's mentioned in the documentation. Instead of the body of the tag containing the HTML the HTML had to be in the value-attribute as shown below.

<ui:outputRichText value="{!v.data.Contact.Bio}" class="bio" />
The "bio" CSS class I added is to actually apply the formatting I need. Although the HTML contains the HTML tags the CSS on the Lighting Pages stripped the UL and LI formatting I needed so I had to manually add that back. The CSS I applied is below.
.THIS .bio {
    margin-left: 15px;
.THIS .bio ul ol {
    margin-top: 10px;
    margin-bottom: 10px;
.THIS .bio p {
    margin-top: 10px;
    margin-bottom: 5px;
.THIS .bio li {
    display: list-item;
    list-style-type: disc;

Add a comment Send a TrackBack