function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Sagar SirsatSagar Sirsat 

Unable to get the desired Lightning Card

Getting this as Output.<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="recordList" type="List"/>
    <aura:attribute name="iden" type="String"/>    
      <aura:iteration items="{!v.recordList}" var="con">
       <div class="c-container">
        <lightning:layout horizontalAlign="spread" multipleRows="true">
             <lightning:layoutItem size="4" padding="around-small">
                 <div class="custom-box">
                 <lightning:card title="{!con.Beer_Name__c}"  iconName="custom:custom56" >
              Alcohol % : {!con.Alcohol__c}&nbsp;
                  Price : {!con.Price__c}
            <div class="slds-col slds-size_4-of-8">
                <img src="{!$Resource.BeerImage}"/>
            </div>   
              <aura:set attribute="actions">
                <lightning:button name="{!con.Id}"  label="View Details" onclick="{!c.detailspage}" variant="brand"/>
            </aura:set>
             </lightning:card>             
            </div>
            
            </lightning:layoutItem>
           </lightning:layout>

            </div>     
           </aura:iteration>      
    <div>
        <c:BeerDetails beerId="{!v.iden}"/>
    </div> 
</aura:component>

I need This as my output.
Best Answer chosen by Sagar Sirsat
Sahil ShitoleSahil Shitole
Hi Sagar,

Do you want those lightning cards to be aligned in the same manner as they are shown in 2nd screenshot.
I have made some changes in your code to do that - 

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="recordList" type="List"/>
    <aura:attribute name="iden" type="String"/>
    <div class="c-container">
        <lightning:layout horizontalAlign="spread" multipleRows="true">
            <aura:iteration items="{!v.recordList}" var="con">
                <lightning:layoutItem size="4" padding="around-small">
                    <div class="custom-box">
                        <lightning:card title="{!con.Beer_Name__c}"  iconName="custom:custom56" >
                            Alcohol % : {!con.Alcohol__c}&nbsp;
                            Price : {!con.Price__c}
                            <div class="slds-col slds-size_4-of-8">
                                <img src="{!$Resource.BeerImage}"/>
                            </div>
                            <aura:set attribute="actions">
                                <lightning:button name="{!con.Id}"  label="View Details" onclick="{!c.detailspage}" variant="brand"/>
                            </aura:set>
                        </lightning:card>
                    </div>
                </lightning:layoutItem>
            </aura:iteration>
        </lightning:layout>
    </div>
    <div>
        <c:BeerDetails beerId="{!v.iden}"/>
    </div>
</aura:component>

Do let me know if this helps you.

Thanks

All Answers

Sahil ShitoleSahil Shitole
Hi Sagar,

Do you want those lightning cards to be aligned in the same manner as they are shown in 2nd screenshot.
I have made some changes in your code to do that - 

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="recordList" type="List"/>
    <aura:attribute name="iden" type="String"/>
    <div class="c-container">
        <lightning:layout horizontalAlign="spread" multipleRows="true">
            <aura:iteration items="{!v.recordList}" var="con">
                <lightning:layoutItem size="4" padding="around-small">
                    <div class="custom-box">
                        <lightning:card title="{!con.Beer_Name__c}"  iconName="custom:custom56" >
                            Alcohol % : {!con.Alcohol__c}&nbsp;
                            Price : {!con.Price__c}
                            <div class="slds-col slds-size_4-of-8">
                                <img src="{!$Resource.BeerImage}"/>
                            </div>
                            <aura:set attribute="actions">
                                <lightning:button name="{!con.Id}"  label="View Details" onclick="{!c.detailspage}" variant="brand"/>
                            </aura:set>
                        </lightning:card>
                    </div>
                </lightning:layoutItem>
            </aura:iteration>
        </lightning:layout>
    </div>
    <div>
        <c:BeerDetails beerId="{!v.iden}"/>
    </div>
</aura:component>

Do let me know if this helps you.

Thanks
This was selected as the best answer
Sagar SirsatSagar Sirsat
Thanks,Sahil