2

How would one create a two list column and be populated with an iterated list. Right now, both columns just repeat themselves with the same {!v.Name} data. I would like to remove the repetition and populate the 2-column list with unique values.

<div aura:id="ListDiv">
    <aura:iteration items="{!v.theList}" var="v" >  
        <div class="slds-grid slds-box slds-box_xx-small slds-p-around_none">
            // Column 1
                    <div class="slds-size_6-of-12">
                        {!v.Name} 
                    </div>
            // Column 2
            <div class="slds-size_6-of-12">
                {!v.Name} 
            </div>
    </div>
</aura:iteration>
0

2 Answers 2

9

lightning:layout is responsive, so you could do something like so:

<lightning:layout horizontalAlign="space" verticalAlign="center" multipleRows="true">
    <aura:iteration items="{!v.theList}" var="v">
        <lightning:layoutItem flexibility="auto" size="12" smallDeviceSize="6" mediumDeviceSize="6" largeDeviceSize="6">
            {!v.Name}
        </lightning:layoutItem>
    </aura:iteration>
</lightning:layout>

The trick is to allocate only 6 out of 12 blocks of real estate to each item (because you want a 2-column format) and set multipleRows="true" (otherwise all values will show in one line) and lightning:layout will take care of the rest. It places the first two values side by side and when it realizes that 12 out of 12 blocks have been utilized it automatically wraps the third value to the next line and so on.

2
  • 2
    the solution works good. But when in case odd number of items are added the last item is aligned to center. So by adding ' flexibility="no-flex" alignmentBump="right" ' to layoutitem it is aligned to one side. this makes UI looks good. Aug 20, 2019 at 17:45
  • Odd number still aligning to centre. What's the solution? <article class="slds-card"> <lightning:layout horizontalAlign="spread" verticalAlign="center" multipleRows="true"> <aura:iteration items="1,2,3,4,5" var="item" > <lightning:layoutItem flexibility="no-flex" alignmentBump="right" size="12" smallDeviceSize="4" mediumDeviceSize="4" largeDeviceSize="4"> <div class="slds-box">item</div> </lightning:layoutItem> </aura:iteration> </lightning:layout> </article> Dec 6, 2021 at 12:38
0

Here's the answer in theory. May need tweaking to suit your code as I've used a pseudo result to iterate over to highlight the indices. In effect, I've only applied the alignment to any item that is the second in a row of three.

    <aura:attribute name="results" type="Integer[]" default="[1,2,3,4,5,6,7,8,9,10,11]"/>
<article class="slds-card">
    <lightning:layout horizontalAlign="spread" verticalAlign="center" multipleRows="true">
        
        <aura:iteration items="{!v.results}" var="item" indexVar="itemNo" >
            <aura:if isTrue = "{!itemNo % 3 ==1}">
                <lightning:layoutItem flexibility="no-flex"  alignmentBump="right"  size="12" smallDeviceSize="4" mediumDeviceSize="4" largeDeviceSize="4">
                    
                    <div class="slds-box">align me left! {!item}</div>
                </lightning:layoutItem>       
                <aura:set attribute="else">
                    <lightning:layoutItem flexibility="no-flex"   size="12" smallDeviceSize="4" mediumDeviceSize="4" largeDeviceSize="4">
                        
                        <div class="slds-box">mod of index = {!itemNo % 3} --- item {!item}</div>
                    </lightning:layoutItem>
                </aura:set>
            </aura:if>           
        </aura:iteration>
    </lightning:layout>
</article>

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.