+ Start a Discussion
Ola BamideleOla Bamidele 

How to change the layout of Account List Item

Hi gurus,

I have this aura component which populates fields to a page however, it populates the fields under each other unfortunately.

So is there a way to move the different fields side by side, therefore the related fields will be under the main field? For example, Account 1 will be to the left of account 2, then the related fields to account 1 will be under account 1. 

Please if you know how i can do this, please let me know!
Thanks!

My Code:
<aura:component >
    <aura:registerEvent name="accountSelected" type="c:AccountSelected"/>
	<aura:attribute name="account" type="Account"/>
    <li><a onclick="{!c.accountSelected}">{!v.account.Name}</a></li>
    <div class = "Industry">
        <li><a onclick="{!c.accountSelected}">{!v.account.Industry}</a></li>
    </div>    
</aura:component>

 
sfdcMonkey.comsfdcMonkey.com
hi Ola, try following code :
<aura:component >
    <aura:registerEvent name="accountSelected" type="c:AccountSelected"/>
	<aura:attribute name="account" type="Account"/>
    
<lightning:layout>
   <lightning:layoutItem size="6" padding="around-small">
       <li><a onclick="{!c.accountSelected}">{!v.account.Name}</a></li>
   </lightning:layoutItem>
   <lightning:layoutItem size="6" padding="around-small">
      <div class = "Industry">
        <li><a onclick="{!c.accountSelected}">{!v.account.Industry}</a></li>
    </div>   
   </lightning:layoutItem>
</lightning:layout>
	
     
</aura:component>

you can use Lightning:layout standard component to set layout of your component:
https://developer.salesforce.com/docs/atlas.en-us.212.0.lightning.meta/lightning/aura_compref_lightning_layoutItem.htm

Thanks, let us know if it helps you 
Ola BamideleOla Bamidele
Hi {!Piyush_soni__c}, 

Thanks for the reply. 

I tried your code but it didnt change much, the fields are still in a straught line unfortunately.

Thanks