I have created a custom lightning template page and in bottom its divided into two parts. But when I add tabs in one of the component even though I have given size to lightning:layout the tabs header goes out of the width of component. Can someone please help if they have solved this issue?

Basically I want the component to be resized and auto adjusted based on screen/window size as it happens in the OOTB lightning template page.

Section 3 is the place where I am facing an issue. Thanks in Advance. Below is the code

<aura:component description="CustomClientPageTemplate" implements="lightning:recordHomeTemplate" access="global">
        <aura:attribute access="global" name="section3" type="Aura.Component[]"/>
        <aura:attribute access="global" name="section4" type="Aura.Component[]"/>
        <aura:attribute access="global" name="left" type="Aura.Component[]"/>
        <aura:attribute access="global" name="right" type="Aura.Component[]"/>
    <div aura:id="container">
        <lightning:layout class="{! $Browser.isDesktop ? '' : 'slds-wrap'}">
            <lightning:layoutItem class="{! ($Browser.isDesktop ? 'widthFix' : '' ) + ' slds-p-around_x-small'}" flexibility="auto">
            <lightning:layoutItem flexibility="auto" >
                <lightning:layout multipleRows="true">
                    <lightning:layoutItem size="12" flexibility="auto" class="slds-p-top_x-small slds-p-bottom_x-small"  largeDeviceSize="12" mediumDeviceSize="8" smallDeviceSize="6">
                    <lightning:layoutItem size="12">
                        <lightning:layout >
                            <lightning:layoutItem size="8" class="slds-p-around_x-small">
                                {!v.section3} // this is the section where I am facing an issue.
                            <lightning:layoutItem size="4">

Below is the Screenshot of the page::

enter image description here

  • This all should work automatically without any custom CSS, just add slds-is-relative on the root div element. Commented Nov 16, 2020 at 13:18
  • @itzmukeshy7 I tried that but it still doesn't work. The text is still showing out of the component width.
    – Jenil
    Commented Nov 16, 2020 at 23:48


You must log in to answer this question.