0

I am currently working through an issue with displaying a list correctly with Lightning components.

Currently I have this, which loops through the amount of countries and displays them on the layout:

            <lightning:layout multipleRows="true" horizontalAlign="center" >
                <aura:iteration items="{!v.availableCountryList}" var="country">

                   <lightning:layoutItem padding="horizontal-large" size="4" class="slds-text-align_left slds-p-left_x-large" flexibility="no-flex">
                        {!country.label}
                   </lightning:layoutItem>

                </aura:iteration>
            </lightning:layout>

Which results in: enter image description here However notice how it creates this row by row when I actually need it to render out vertically in order. (it's going alphabetically row by row instead of column by column)

What I have attempted
So far I have tried adding "slds-grid slds-grid--vertical" to the layout tags.

            <lightning:layout class="slds-grid slds-grid--vertical" multipleRows="true" horizontalAlign="center" >
                <aura:iteration items="{!v.availableCountryList}" var="country">

                   <lightning:layoutItem padding="horizontal-large" size="4" class="slds-text-align_left slds-p-left_x-large" flexibility="no-flex">
                        {!country.label}
                   </lightning:layoutItem>

                </aura:iteration>
            </lightning:layout>

and this partially works in that it now orders them alphabetically vertically: enter image description here However I have lost the multiple column appearance when opting to make this vertical and instead have a long list with a scroll bar. I understand that I may need to split the country list into 3 lists so that there's one per column in the controller, I just haven't been able to find a method so far in make that work on the UI component side of things. If I'm going about this wrong and need to using something else besides Lightning:Layout that's fine also.

Any suggestions and pointers would be greatly appreciated thank you!

0

I think you will need to change the structuring of your code to include 3 arrays containing the countries. You will need to prepare these arrays beforehand and use 2 iterations to render content. Here is a sample LWC code to demonstrate it (yours is aura but this is the quick way to view what you want).

HTML:

<template>
    <div class="app slds-p-around_x-large">
        <lightning-layout>
            <template for:each={list} for:item="item">
                <lightning-layout-item key={item.key} size="4">
                    <lightning-layout multiple-rows>
                        <template for:each={item.value} for:item="val">
                            <lightning-layout-item key={val} size="12">
                                {val}
                            </lightning-layout-item>
                        </template>
                    </lightning-layout>
                </lightning-layout-item>
            </template>
        </lightning-layout>
    </div>
</template>

JS:

import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {
    list = [
        {
            "key": 1,
            "value": ['1', 'B', 'C', 'D'],
        },
        {
            "key": 2,
            "value": ['2', 'B', 'C', 'D'],
        },
        {
            "key": 3,
            "value": ['3', 'B', 'C', 'D'],
        }
    ]
}

Preview

| improve this answer | |
  • Yep I thought I might have to split the list from within the controller into 3. Though if I try to add each separate list as a layout item it still combines them all into one column in aura. I kinda need to keep this as an aura component. – Chandrew Jul 29 at 13:34
  • Would you be able to update your question with the 3 list implementation? – manjit5190 Jul 29 at 13:48
  • The last paragraph of my initial post already mentions that I may need to split it into 3 lists but I can amend that to the title perhaps. – Chandrew Jul 29 at 13:56
  • Yes, and update the code as well if you have any issues with splitting implementation. – manjit5190 Jul 29 at 14:12
0

So I figured out a solution. Simply wrap everything with these:

<div class="slds-grid slds-gutters"></div>

and then

<div class="slds-col"></div>

around each list (my earlier code snippet) and I ended up with this: enter image description here

Now I just need to work on the sorting logic for the 3 lists so the problem is essentially solved.
Thanks everyone who commented! :)

| 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.