+ Start a Discussion
Arun AArun A 

Lightning Design System not rendering the ordered-list of html

Lightning Design System is not rendering the ordered-list of html. Is it a bug?

=================================================================================
​WITH CSS
<aura:component >
    <ltng:require styles="/resource/SLDS090/assets/styles/salesforce-lightning-design-system.css" />  
<ol >
    <li>red</li>
    <li>green</li>
    <li>blue</li>
</ol>
</aura:component>
User-added image
============================================================================
WITHOUT CSS
<aura:component >
<ol >
    <li>red</li>
    <li>green</li>
    <li>blue</li>
</ol>
</aura:component>
User-added image
yossi sud 6yossi sud 6
Hi Arun,

You need to use slds-text-longform style class like this:
 
<div class="slds-text-longform">
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <h3 class="slds-text-heading--small">Something</h3>
  <ul>
    <li>The quick brown fox jumps over the lazy dog.</li>
    <li>The quick brown fox jumps over the lazy dog.</li>
  </ul>
</div>

see here: https://www.lightningdesignsystem.com/components/utilities/text/#overview

 
Peter Yao 9Peter Yao 9
Should the ol "type" attribute work in lightning? 

This renders the same as if type isn't specified, but works as expected outside of lightning
<div class="slds-text-longform">
  <ol type="a">
    <li>The quick brown fox jumps over the lazy dog.</li>
    <li>The quick brown fox jumps over the lazy dog.</li>
  </ol>
</div>