function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ 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>