2

We have built a lightning component which is to be used on the record home page. Now the user can either add the component in the side or in the detail section itself. Everything is working fine except the sizing of the containers.

We have used the lightning:layout and lightning:layoutItem to add the components and as per the documentation it works as per the viewport size and not the size of the parent container.

Component in side bar:

enter image description here

Component in the record Detail page

enter image description here

Now, the component appears perfectly fine in the detail page section with 3 column layout, but when the same component is added in the side bar the expectation is that it automatically should resize to one column layout and the 3 components should appear one below the other and that is not happening. I tried with couple of options on the lightning:layout but that didn't work. Need help here!

Lightning code:

<lightning:layout multipleRows="true">
            <lightning:layoutItem size="12" smallDeviceSize="12" mediumDeviceSize="12" largeDeviceSize="4" padding="around-small" flexibility="auto">
                ------COntent of section One------ 
        </lightning:layoutItem>
            <lightning:layoutItem size="12" smallDeviceSize="12" mediumDeviceSize="12" largeDeviceSize="4" padding="around-small" flexibility="auto">
            -----COntent of section two------
        </lightning:layoutItem>
            <lightning:layoutItem size="12" smallDeviceSize="12" mediumDeviceSize="12" largeDeviceSize="4" padding="around-small" flexibility="auto">
            -----COntent of section Three------
        </lightning:layoutItem>
        </lightning:layout>
2

So the solution was to use the lightning:flexipageRegionInfo component which will provide the width and then the sections could be rendered accordingly.

Reference Link: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_app_builder_width_aware.htm

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.