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:
Component in the record Detail page
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>