Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Shikha Devi 16Shikha Devi 16 

slds progress indicator css is not working properly.

HI,
I am working on lightning component where I need progress indicator. I am using slds progress indicator but it is not showing css same as shown in the slds guide.
I have used the same code mentioned in the guide.https://www.lightningdesignsystem.com/components/progress-indicator/#flavor-base-default
But still it is not showing connecting line of two button. please find screenshot of issue.User-added image
According to guide image bar should look likeUser-added image

Please help me on the same

Thanks
Shikha
Best Answer chosen by Shikha Devi 16
Shikha Devi 16Shikha Devi 16
@Andrew :Yes,the issue is coming because of Summer17 release. Now this issue is resolved for me. 

Please try given below code

<aura:component >
    <div class="slds-progress">
  <ol class="slds-progress__list">
    <li class="slds-progress__item slds-is-active">
      <button class="slds-button slds-progress__marker" aria-describedby="step-1-tooltip">
        <span class="slds-assistive-text">Step 1 - Active</span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-2-tooltip">
        <span class="slds-assistive-text">Step 2 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-3-tooltip">
        <span class="slds-assistive-text">Step 3 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-4-tooltip">
        <span class="slds-assistive-text">Step 4 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-5-tooltip">
        <span class="slds-assistive-text">Step 5 </span>
      </button>
    </li>
  </ol>
  <div class="slds-progress-bar slds-progress-bar_x-small">
    <span class="slds-progress-bar__value" style="width:0%;">
      <span class="slds-assistive-text">Progress: 0%</span>
    </span>
  </div>
</div>
</aura:component>

 

All Answers

sfdcMonkey.comsfdcMonkey.com
hi shikha 
below code is working fine in my org.  
<aura:component >
	<div class="slds-progress">
  <ol class="slds-progress__list">
    <li class="slds-progress__item slds-is-active">
      <button class="slds-button slds-progress__marker" aria-describedby="step-1-tooltip">
        <span class="slds-assistive-text">Step 1 - Active</span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-2-tooltip">
        <span class="slds-assistive-text">Step 2 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-3-tooltip">
        <span class="slds-assistive-text">Step 3 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-4-tooltip">
        <span class="slds-assistive-text">Step 4 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-5-tooltip">
        <span class="slds-assistive-text">Step 5 </span>
      </button>
    </li>
  </ol>
  <div class="slds-progress-bar">
    <span class="slds-progress-bar__value" style="width:0%;">
      <span class="slds-assistive-text">Progress: 0%</span>
    </span>
  </div>
</div>
</aura:component>
test app  
<aura:application extends="force:slds">
    <c:progressBar/>
</aura:application>

User-added image
Shikha Devi 16Shikha Devi 16
Hi Piyush,

even I am using same code still progress bar is coming without connecting line.User-added image
sfdcMonkey.comsfdcMonkey.com
in which browser you have check it? 
Shikha Devi 16Shikha Devi 16
chrome
sfdcMonkey.comsfdcMonkey.com
ohh, why it's doing strange behavior with your code,
can you share your exact code once and from where do you run your lightning component ?
thanks 
Shikha Devi 16Shikha Devi 16
Component : Test
<aura:component >
    <div class="slds-progress">
  <ol class="slds-progress__list">
    <li class="slds-progress__item slds-is-active">
      <button class="slds-button slds-progress__marker" aria-describedby="step-1-tooltip">
        <span class="slds-assistive-text">Step 1 - Active</span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-2-tooltip">
        <span class="slds-assistive-text">Step 2 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-3-tooltip">
        <span class="slds-assistive-text">Step 3 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-4-tooltip">
        <span class="slds-assistive-text">Step 4 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-5-tooltip">
        <span class="slds-assistive-text">Step 5 </span>
      </button>
    </li>
  </ol>
  <div class="slds-progress-bar">
    <span class="slds-progress-bar__value" style="width:0%;">
      <span class="slds-assistive-text">Progress: 0%</span>
    </span>
  </div>
</div>
</aura:component>

App :
<aura:application extends="force:slds">
    <div>Test</div><br/>
    <div>
    <c:test />
        </div>
</aura:application>
sfdcMonkey.comsfdcMonkey.com
then it's strange,  
Andrew Da SilvaAndrew Da Silva
I can report I'm having the same issue, According to another developer I know, this issue occured as part of the new Summer 17 release. Works for some of my other colleagues but does not for me.
Shikha Devi 16Shikha Devi 16
@Andrew :Yes,the issue is coming because of Summer17 release. Now this issue is resolved for me. 

Please try given below code

<aura:component >
    <div class="slds-progress">
  <ol class="slds-progress__list">
    <li class="slds-progress__item slds-is-active">
      <button class="slds-button slds-progress__marker" aria-describedby="step-1-tooltip">
        <span class="slds-assistive-text">Step 1 - Active</span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-2-tooltip">
        <span class="slds-assistive-text">Step 2 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-3-tooltip">
        <span class="slds-assistive-text">Step 3 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-4-tooltip">
        <span class="slds-assistive-text">Step 4 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-5-tooltip">
        <span class="slds-assistive-text">Step 5 </span>
      </button>
    </li>
  </ol>
  <div class="slds-progress-bar slds-progress-bar_x-small">
    <span class="slds-progress-bar__value" style="width:0%;">
      <span class="slds-assistive-text">Progress: 0%</span>
    </span>
  </div>
</div>
</aura:component>

 
This was selected as the best answer