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 Answer 1

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
      Commented Aug 13, 2020 at 16:30
    • @Ysr Shk, I tried giving space after .THIS it is disturbing the overall output styling and it didnt work.
      – Suhasini
      Commented Aug 13, 2020 at 23:54
    • @sfdcfox - Thanks for correction, I have updated the wordings.
      – Ysr Shk
      Commented Aug 14, 2020 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
      Commented Aug 14, 2020 at 5:01

    You must log in to answer this question.

    Not the answer you're looking for? Browse other questions tagged .