Lightning Component - Grid Sizing - Narrow (right) side of Lightning page

Question

Me again.....

So I am trying to size columns using automatic sizing (Easy enough right)

Well, It works fine in full screen and on the left side of a lightning page

<div class="slds-grid slds-wrap slds-grid--align-center">
     <div class="slds-size--1-of-2 slds-small-size--1-of-1">

     </div>
</div>

This works well in full screen, in its own tab, etc. The grid is in the center and takes up the appropriate amount of space....

BUT, when the component is placed in the lightning page on the right (narrow) column, it is centered and squeezed. It knows it is in a small space but WILL NOT use the size--1-of-1.

If I drag the entire window to make it smaller it will revert to the correct size after the entire window is made smaller.

Anyone know how to make the CSS understand that it is in the narrow column and apply the correct css?

In a catch 22, if I just use 1-of-1 then the large page is obscenely large, but the 1-of-2 makes the right side too squeezed.....

Answer 1

It might help to use the "slds-form--stacked" class to stack the form elements and the inner divs holding the form elements can have "slds-size--1-of-1 slds-medium-size--1-of-2" classes.

If you navigate to Lightning forms , at the end of the page , you have a form example

Which is responsive to achieve the similar effect.

Answer 2

Looks like with winter 18 we will be able to do this properly with lightning:flexipageRegionInfo

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 List View component renders differently in a large region than it does in a small region as it’s a width-aware component.

Make Your Lightning Page Components Width-Aware with lightning:flexipageRegionInfo