0

I am working on the following aura component:

<aura:component>
    <aura:attribute name="stages" type="List" default="['Step1', 'Step2', 'Step3', 'Step4']"/>
    <aura:attribute name="completedSteps" type="Integer" default="2" />
    <aura:attribute name="totalSteps" type="Integer" default="{!v.stages.length}" />        
    <br/><br/><br/><br/>    
        <ol class="progress" id="test" data-steps="{!v.totalSteps}" style="margin:100px;">        
            <aura:iteration items="{!v.stages}" var="stage" indexVar="index" >
                <li class="{!if(index &lt; v.completedSteps,'active', '')}" style="text-align: center;width:150px"> 
                    <span class="step"></span>
                    <span class="name">{!stage}</span>
                </li>            
            </aura:iteration>
        </ol>        
</aura:component>

Its style is as below:

.THIS.progress { 
        width: 100%;
        list-style: none;
        list-style-image: none;
        margin: 40px 0 40px 0;
        padding: 0;    
    }
.THIS.progress li {
        float: left;
        text-align: center;
        position: relative;
        font-family: sans-serif;
    }
    
    .THIS.progress .name,
    .THIS.progress .description {
        display: block;
        vertical-align: bottom;
        text-align: center;
        color: black;
        opacity: 0.3;
        
    }
    
    .THIS.progress .name {
        font-size: 1.5em;
        margin-top: 1em;
        margin-bottom: 0.5em;
    }
    
    .THIS.progress .step {
        border: 3px solid #b6b6b6;
        background-color: #b6b6b6;
        border-radius: 50%;
        line-height: 1.2;
        width: 1.2em;
        height: 1.2em;
        display: inline-block;
        z-index: 0;
    }
    
    .THIS.progress .step:before {
        content: "";
        display: block;
        background-color: #b6b6b6;
        border: 3px transparent;
        height: 0.2em;
        width: 100%;
        position: absolute;
        top: 0.6em;
        left: -50%;
        z-index: -2;
    }
    
    .THIS.progress .step:after {
        content: "";
        display: block;
        background-color: #1876d5;
        border: 3px transparent;
        height: 0.35em;
        width: 0;
        position: absolute;
        top: 0.55em;
        left: 50%;
        z-index: -1;
    }
    
    .THIS.progress li:first-of-type .step:before {
        display: none;
    }
    
    .THIS.progress li:last-of-type .step:after {
        display: none;
    }
    
    .THIS.progress .active .name,
    .THIS.progress .active .description,
    .THIS.progress .active .step {
        opacity: 1;
    }
    
    .THIS.progress .active .step {
        background-color: #1996fd;
        border: 3px solid #1996fd;
    }
    
    .THIS.progress .done .step {
        background-color: #1876d5;
        border: 3px solid #1876d5;
    }
    
    .THIS.progress .done .step:after {
        width: 100%;
        transition: width 2s ease;
    }

The above aura component is working fine but when I tried to include the ol(ordered list) in a div and tried to apply slds-align--absolute-center as below (with the intention of displaying the ol at the center of the screen), it is not working as expected (instead it is displaying plain ol ignoring all css):

<div class="slds-align--absolute-center">
   <ol class="progress" id="test" data-steps="{!v.totalSteps}">        
            <aura:iteration items="{!v.stages}" var="stage" indexVar="index" >
                <li class="{!if(index &lt; v.completedSteps,'active', '')}" style="text-align: center;width:150px"> 
                    <span class="step"></span>
                    <span class="name">{!stage}</span>
                </li>            
            </aura:iteration>
   </ol>
</div>

Please let me know if I am missing something here.

0
1

Lightning css has two ways. For top-level element it must not have spaces(which is why your first component was working). If your component/class is not a top-level class, it needs a space after .THIS.

If you see in documentation, they have given example for that.

The element matches the .THIS.white selector and renders with a white background. Note that there is no space in the selector as this rule is for top-level elements.

The element matches the .THIS .red selector and renders with a red background. Note that this is a descendant selector and it contains a space as the

  • element is not a top-level element.

  • Try by giving space before all progress elements like shown below -

    .THIS .progress { 
        width: 100%;
        list-style: none;
        list-style-image: none;
        margin: 40px 0 40px 0;
        padding: 0;    
    }
    .THIS .progress li {
        float: left;
        text-align: center;
        position: relative;
        font-family: sans-serif;
    }
    
    .THIS .progress .name,
    .THIS .progress .description {
        display: block;
        vertical-align: bottom;
        text-align: center;
        color: black;
        opacity: 0.3;
        
    }
    
    .THIS .progress .name {
        font-size: 1.5em;
        margin-top: 1em;
        margin-bottom: 0.5em;
    }
    
    .THIS .progress .step {
        border: 3px solid #b6b6b6;
        background-color: #b6b6b6;
        border-radius: 50%;
        line-height: 1.2;
        width: 1.2em;
        height: 1.2em;
        display: inline-block;
        z-index: 0;
    }
    
    .THIS .progress .step:before {
        content: "";
        display: block;
        background-color: #b6b6b6;
        border: 3px transparent;
        height: 0.2em;
        width: 100%;
        position: absolute;
        top: 0.6em;
        left: -50%;
        z-index: -2;
    }
    
    .THIS .progress .step:after {
        content: "";
        display: block;
        background-color: #1876d5;
        border: 3px transparent;
        height: 0.35em;
        width: 0;
        position: absolute;
        top: 0.55em;
        left: 50%;
        z-index: -1;
    }
    
    .THIS .progress li:first-of-type .step:before {
        display: none;
    }
    
    .THIS .progress li:last-of-type .step:after {
        display: none;
    }
    
    .THIS .progress .active .name,
    .THIS .progress .active .description,
    .THIS .progress .active .step {
        opacity: 1;
    }
    
    .THIS .progress .active .step {
        background-color: #1996fd;
        border: 3px solid #1996fd;
    }
    
    .THIS .progress .done .step {
        background-color: #1876d5;
        border: 3px solid #1876d5;
    }
    
    .THIS .progress .done .step:after {
        width: 100%;
        transition: width 2s ease;
    }
    
    4
    • 1
      doesn't require spaces should be must not have spaces, actually.
      – sfdcfox
      Aug 13 '20 at 16:30
    • @Ysr Shk, I tried giving space after .THIS it is disturbing the overall output styling and it didnt work.
      – Suha
      Aug 13 '20 at 23:54
    • @sfdcfox - Thanks for correction, I have updated the wordings.
      – Ysr Shk
      Aug 14 '20 at 4:59
    • @Suha - I tried your styling with before div and after div, it was showing same output. You can also try manually with hardcoded values instead of aura variables, it shows same rounded grey circles for progress.
      – Ysr Shk
      Aug 14 '20 at 5:01

    Your Answer

    By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

    Not the answer you're looking for? Browse other questions tagged or ask your own question.