function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Rusty RoarkRusty Roark 

Single column homepage layout

I built a dashboard that our users would like to use as their main homepage. But with the 2 column layout it squishes everything down and makes it hard to see. I followed the steps below in the dev console and created the single column layout. And when i choose that option and put the dashboard it everything looks great in the page editor. However when i save/activate and go to it, it loads into a small column on the left of the screen instead of taking up the whole screen. Any suggestions? Thanks
You need to create the following component HomePageSingleColumnTemplate with the following code

<aura:component implements="lightning:homeTemplate">
    <aura:attribute name="main" type="Aura.Component[]" /> 

    <div>
        <lightning:layout horizontalAlign="spread">
            {!v.main}
        </lightning:layout>
    </div>
</aura:component>

Also you have to specify design for it

<design:component >
    <flexipage:template >
        <flexipage:region name="main" defaultWidth="Xlarge">
        </flexipage:region>
    </flexipage:template>
</design:component>

 
Alain CabonAlain Cabon
Hi,

Developers often struggle to have a satisfactory result with <lightning:layout>.

It is easier to just use  <div class="slds-grid slds-wrap"> based on these samples: https://www.lightningdesignsystem.com/utilities/grid/
 
<aura:component implements="lightning:homeTemplate" access="global" >
   
    <aura:attribute name="left" type="Aura.Component[]" />
    <aura:attribute name="right" type="Aura.Component[]" />
    
    <div class="slds-grid slds-wrap">
        <div class="slds-col slds-size_1-of-2">
            <span>{!v.left}</span>
        </div>
        <div class="slds-col slds-size_1-of-2">
            <span>{!v.right}</span>
        </div>         
    </div>
</aura:component>
 
<design:component label="My two column Page">
    <flexipage:template>
        
        <flexipage:region name="left" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>
        
        <flexipage:region name="right" defaultWidth="SMALL">
            <flexipage:formfactor type="MEDIUM" width="SMALL"/>
        </flexipage:region>               
        
    </flexipage:template>
</design:component>
Raj VakatiRaj Vakati
Try to set the CSS as below
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_app_builder_width_aware.htm
.THIS {
    width:100%;
}