I am working on building a custom flexipage template. The expected behavior is that the lightning page will have two columns that independently scroll. I have the two columns, and the ability to scroll however I am having trouble with Highlights panel and Path being responsive without cutting off fields when the window size changes.

Below is a screen shot of the window size 1850 x 1050 enter image description here

Here is a screen shot of the window size 1440 x 900 enter image description here

In the second screen shot you can see the last two fields are cut off. The behavior I am expecting would be that the fields wrap to a new line.

enter image description here

Here is the markup:


<aura:component implements="lightning:recordHomeTemplate"
            description="A record page, 2 columns both scrollable." >
<aura:attribute name="left" type="Aura.Component[]" access="global" />
<aura:attribute name="right"  type="Aura.Component[]" access="global" />

    <div class="container">

            <lightning:layoutItem flexibility="grow" class="slds-m-right_small slds-var-m-right_small scroll-y">

            <lightning:layoutItem size="{! $Browser.isDesktop ? '4' : '6' }"
                                  class="slds-m-left_small slds-var-m-left_small scroll-y">



<design:component label="2 Column Page">
<flexipage:template >
  <flexipage:region name="left" defaultWidth="Medium" />
  <flexipage:region name="right" defaultWidth="Medium" />

</flexipage:template> design:supportedFormFactors <design:supportedFormFactor type="Large"/> <design:supportedFormFactor type="Small"/> </design:supportedFormFactors> </design:component>

I am new to coding, so I appreciate your help!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.