0

My page looks like this (I can see only 3 cards but there are more) https://i.stack.imgur.com/wnjw7.jpg

How could I change this to show as many cards as possible? Should I use some attribute from SLDS or should I use CSS for this?

My code looks like this:

<template>

    <lightning-card icon-name={icon} title={recordDetails.Name} variant="Narrow">
        <lightning-button label="View" onclick={handleViewDetails} slot="actions"></lightning-button>

        <div class="slds-p-horizontal_small"> <!-- -->

            <lightning-tabset>

                <lightning-tab label="Description">
                    <div class="card-content">

                        <div class="slds-grid slds-wrap">
                            <template for:each={jobInfo} for:item="info">

                                <div key={info.label} class={info.class}>
                                    <lightning-icon icon-name={info.icon} alternative-text={info.label}
                                        size="x-small" title={info.label}></lightning-icon>
                                    <b class="slds-m-horizontal_xx-small">{info.label}</b>
                                    <span class="slds-m-horizontal_xx-small">{info.value}</span>
                                </div>
                            </template>
                        </div>

                        <lightning-formatted-rich-text value={jobDescription}>
                        </lightning-formatted-rich-text>

                    </div>
                </lightning-tab>

                <template if:true={relatedJobApplications}>
                    <lightning-tab label={label.Applications}>
                        <div class="card-content">

                            <template for:each={relatedJobApplications} for:item="jobApplication">
                                <c-hmp-job-card-application key={jobApplication.Id} job-application={jobApplication}>
                                </c-hmp-job-card-application>
                            </template>

                        </div>
                    </lightning-tab>
                </template>
            </lightning-tabset>

        </div>
    </lightning-card>
</template>
1
  • The Scrollable classes in SLDS may help? Aside from that, you can also use standard css if you desire.
    – sfdcfox
    May 2 at 16:24

1 Answer 1

1

Add a grid container by adding slds-grid to an HTML element

<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

SLDS GRID LINK

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.