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>
Best Answer
You can use a display flex and play with the justify-content attribute.