Width Aware Lightning Page Components

In this post, I am going to show how to design you are lighting component region aware to adjust the width by using lightning:flexipageRegionInfo which Provides Lightning page region information to the component that contains it and passes the width of the region that the component is dropped into in the Lightning App Builder. When you add a component to a region on a page in the Lightning App Builder, the lightning:flexipageRegionInfo sub-component passes the width of that region to its parent component. With lightning:flexipageRegionInfo and some strategic CSS, you can tell the parent component to render in different ways in different regions at runtime. For example, the ListView component renders differently in a large region than it does in a small region as it’s a width-aware component. Valid region width values are Small, Medium, Large, and Xlarge.You can use CSS to style your component and to help determine how your component renders. The following example component has two fields, field1 and field2. The component renders with the fields side by side, filling 50% of the region’s available width when not in a small region. When the component is in a small region, the fields render as a list, using 100% of the region’s width.

If you use this component it will adjust the width dynamically based on the CSS which you defined.

The component renders with the fields side by side, filling 50% of the region’s available width when not in a small region. When the component is in a small region, the fields render as a list, using 100% of the region’s width.