0

I have a parent component sending the values for lightning card one by one to the child component. The child component contains the lightning card. I want to display 3 cards in one row but all the cards are getting displayed on one row itself. Below is my code.

Parent component:

<div class="slds-grid slds-wrap">
     <template for:each={reportMessage} for:item="summaryField">
           <div key={summaryField.fieldName}>
               <c-q-r-report-summary-item title={summaryField.fieldName} value={summaryField.totalRecords}></c-q-r-report-summary-item>
           </div>
     </template>
</div>

Child Component:

  <template>
        <div class="slds-grid slds-wrap slds-col slds-size_1-of-3 slds-p-horizontal_x-small slds-p-vertical_x-small">

<div class="cardShadow">
                <lightning-card>
                    <div slot="title" class="slds-align_absolute-center slds-border_bottom slds-text-heading_medium">
                        {title} 
                    </div>
                    <p class="slds-p-horizontal_small slds-align_absolute-center slds-text-heading_large ">{value}</p>
               </lightning-card>
           </div>
        </div>
    </template>

As you can see there are 4 in one row. I want 3 in a row and then the remaining should go down to the next rows and so on

1

In the child component, the following line of code (line #2) is sort of pointless for your need:

<div class="slds-grid slds-wrap slds-col slds-size_1-of-3 slds-p-horizontal_x-small slds-p-vertical_x-small">

This line is actually instructing the lighting platform to consider this element as grid and determine the size of its column dynamically, while you have already defined the parent component element with slds-grid. The CSS & HTML in the child component should be written only for its self contained design i.e., for each box or card that is displaying the name and value.

The solution to your problem would be to get rid of the aforementioned HTML element in the child component and write the parent component HTML as

<div class="slds-grid slds-wrap">
     <template for:each={reportMessage} for:item="summaryField">
           <div class="slds-size_1-of-3" key={summaryField.fieldName}>
               <c-q-r-report-summary-item title={summaryField.fieldName} value={summaryField.totalRecords}></c-q-r-report-summary-item>
           </div>
     </template>
</div>

or

<div class="slds-grid slds-wrap">
     <template for:each={reportMessage} for:item="summaryField">
           <div key={summaryField.fieldName}>
               <c-q-r-report-summary-item class="slds-size_1-of-3" title={summaryField.fieldName} value={summaryField.totalRecords}></c-q-r-report-summary-item>
           </div>
     </template>
</div>

Lightning platform reads this parent component as follows:

  1. Outermost DIV element to be considered as grid (or can be divided into columns)
  2. slds-size_1-of-3 in one of the inner element instructs that the outermost grid should be divided into 3 columns and this inner element should occupy only 1 column width.
| improve this answer | |
  • The first solution before OR worked. There was no difference when I tried with the 2nd solution. @arut – yash shah Apr 30 at 7:37
  • I've tried out the second solution in one of the components I was developing and it worked. I guess there could be some other thing restricting it in your code. Anyways, I guess the 1st solution is good enough. – arut Apr 30 at 7:53

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.