For some time i have been trying to left align the center column, but still keep it at the center. ON the image below you can see the icons with the counts for each service, but not aligned to the left on each row. How do I make that happen? Pasting the code and image below. Please advise!
<div>
<aura:iteration items="{! v.mduInfo }" var="mdu">
<div class="slds-text-heading_x-small">{! mdu.address.Name+', '+mdu.address.sumchans__city__c+'
'+mdu.address.sumchans__provinceCode__c+' '+mdu.address.sumchans__postalCode__c }</div>
<div class="slds-grid slds-gutters">
<div class="slds-col">
<ul class="slds-list_horizontal">
<li class="slds-p-around_x-small">Total Units:<strong>{! ' '+mdu.totalUnits }</strong></li>
<li class="slds-p-around_x-small">N/N:<strong>{! ' '+mdu.nnUnits }</strong></li>
<li class="slds-p-around_x-small">C/C:<strong>{! ' '+mdu.ccUnits }</strong></li>
<li class="slds-p-around_x-small">A/A:<strong>{! ' '+mdu.aaUnits }</strong></li>
</ul>
</div>
<div class="slds-col">
<ul class="slds-list_horizontal">
<li class="slds-p-around_x-small">
<lightning:icon iconName="utility:desktop" alternativeText="Television" size="x-small" /><strong>{!
' '+mdu.videoOffering }</strong></li>
<li class="slds-p-around_x-small ">
<lightning:icon iconName="utility:wifi" alternativeText="Internet" size="x-small" /><strong>{!
' '+mdu.internetOffering }</strong></li>
<li class="slds-p-around_x-small ">
<lightning:icon iconName="utility:call" alternativeText="Phone" size="x-small" /><strong>{!
' '+mdu.phoneOffering }</strong></li>
</ul>
</div>
<div class="slds-col">
<ul class="slds-float_right">
<div>
<ul>
<li class="slds-align_absolute-center slds-p-around_x-small">Penetration</li>
<li class="slds-align_absolute-center slds-p-around_x-small">
<h2>
<lightning:formattedNumber value="{! (mdu.aaUnits/mdu.totalUnits) }" style="percent" />
</h2>
</li>
</ul>
</div>
</ul>
</div>
</div>
</aura:iteration>
</div>
Best Answer
Technically they are aligned to the left, the problem is that the column widths aren't the same in the rows since you haven't defined what they should be. By adding
slds-size_1-of-3
to eachslds-col
you would set them all to be 33% of the allowed width.Applying this to the code above would result in:
You should also check out and which takes care of the CSS classes for grids and it makes sure it is up-to-date with any changes to SLDS: https://developer.salesforce.com/docs/component-library/bundle/lightning:layout/example