0

I have a vertical navigation that is populated from a list of records, for each item I am trying to add a span with some extra information (in this case a badge), but I want to be pull to the right (just the span). However, it doesnt matter what I do is always stick to the left to the left

I tried adding adding !important slds-text-align_right slds-col_bump-right

Is there anything I am missing?

<div class="demo-only slds-p-top_small" style="width: 100%;">
    <nav class="slds-nav-vertical" aria-label="Sub page">
        <div class="slds-nav-vertical__section">
            <ul aura:id="theList">
                <aura:iteration items="{!v.attList}" var="att" indexVar="indx">
                    <li aura:id="testli" class="slds-nav-vertical__item" onclick="{!c.getTasks}" data-id="{!indx}" >
                        <div id="{!att.Id}" class="slds-nav-vertical__action" >
                            {!att.Name}
                            <span class="slds-text-align_right slds-badge ">
                                I am Badge
                            </span>
                        </div>
                    </li>
                </aura:iteration>                
            </ul>
        </div>
    </nav>
</div>
2

You can use a display flex and play with the justify-content attribute.

<aura:attribute name="forIterate" type="List" default="One, Two, Three" />

<div class="demo-only slds-p-top_small" style="width: 100%;">
<nav class="slds-nav-vertical" aria-label="Sub page">
    <div class="slds-nav-vertical__section">
        <ul aura:id="theList">
            <aura:iteration items="{!v.forIterate}" var="att" indexVar="indx">
                <li aura:id="testli" class="slds-nav-vertical__item" data-id="{!indx}" >
                    <div id="{!att}" class="slds-nav-vertical__action" style="display: flex;justify-content: space-between;align-items: center;">
                        <span class="text">{!att}</span>
                        <span class="slds-text-align_right slds-badge ">
                            I am Badge
                        </span>
                    </div>
                </li>
            </aura:iteration>                
        </ul>
    </div>
</nav>

| improve this answer | |

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.