1
<fieldset class="slds-form-element slds-m-top_xx-large form-fields-width borderForBoxes">
            <LEGEND class="slds-form-element__label tlabel slds-text-body_small">                  
                Include values
            </LEGEND>

            <aura:iteration items="{!v.UserInfoForContactNames}" var="cus" indexVar="key">
                <div>
                    <label class="slds-checkbox list-columns">                
                        <ui:inputCheckbox text="{!cus.Contact.Id}" value="false" aura:id="InputSelectMultiple1" name="checkboxContacts" change="{!c.onMultiSelectChange}" />
                        <span class="slds-checkbox--faux"></span>
                        <span id="{!cus.Contact.Id}" class="fontConsistency">&nbsp; {!cus.Contact.Name}</span>                
                    </label>
                    <br/>
                </div>
            </aura:iteration>            

        </fieldset>

If the above code has 30 values i want to display them in 3 columns with slds-grid or data table by showing 10 records in one column. Since am using aura:iteration i wouldn't know the count inside the loop. Is there any best way to do this? Can you please suggest.

1 Answer 1

1

If you're using a grid, it's just:

<div class="slds-grid slds-wrap">
    <aura:iteration ...>
        <div class="slds-size_1-of-3">
             ...
        </div>
    </aura:iteration>
</div>

slds-wrap causes overflow on each line to go to the next, and 1 of 3 causes each item to take up 1/3rd of the column. The result will be 34 rows, each with 3 items, except the last.

4
  • @user5495947 are you trying to get ten columns or ten rows?
    – sfdcfox
    Oct 30, 2017 at 22:20
  • for 30 records, 10 rows and 3 columns. Oct 31, 2017 at 13:34
  • @user5495947 So, this grid code should produce that output. Are you getting a different result?
    – sfdcfox
    Oct 31, 2017 at 14:35
  • am getting different result. If there are 24 records, it is showing 8 in each column. But i need column1(10), column2(10), column3(4) Oct 31, 2017 at 20:30

You must log in to answer this question.

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