0

How can we put lightning component beside the each component?

I would like to put two components like the attachment in the record page, by changing the size of component width.

Anyone knows how to do it?

enter image description here

1

You can use lightning:layoutItem and lightning:layout to configure your component structure. As per docs:-

A lightning:layoutItem is the basic element within lightning:layout. You can arrange one or more layout items inside lightning:layout. The attributes of lightning:layoutItem enable you to configure the size of the layout item, and change how the layout is configured on different device sizes.

The layout system is mobile-first. If the size and smallDeviceSize attributes are both specified, the size attribute is applied to small mobile phones, and the smallDeviceSize is applied to smart phones. The sizing attributes are additive and apply to devices that size and larger. For example, if mediumDeviceSize=10 and largeDeviceSize isn’t set, then mediumDeviceSize will apply to tablets, as well as desktop and larger devices.

If the smallDeviceSize, mediumDeviceSize, or largeDeviceSize attributes are specified, the size attribute is required.

<aura:component extends="lightningcomponentdemo:exampleLayoutItemsBase">
    <div class="c-container">
        <lightning:layout multipleRows="true">
            <lightning:layoutItem size="4" padding="around-small">
                <div class="custom-box">1</div>
            </lightning:layoutItem>
            <lightning:layoutItem size="4" padding="around-small">
                <div class="custom-box">2</div>
            </lightning:layoutItem>
            <lightning:layoutItem size="4" padding="around-small">
                <div class="custom-box">3</div>
            </lightning:layoutItem>
            <lightning:layoutItem size="4" padding="around-small">
                <div class="custom-box">4</div>
            </lightning:layoutItem>
            <lightning:layoutItem size="4" padding="around-small">
                <div class="custom-box">5</div>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</aura:component>

enter image description here

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