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;
}

Published by

lekkim

Positive, competent, out-spoken, frank and customer focused architect and developer with a strong foundation in web, cloud and product development. I'm a strong advocate for API first and cloud based solutions and development. I have a knack for being able to communicate and present technically complicated matters in conference, customer and training settings. I've previously acted as team member and leader in a product organisation.