dev noob here --

My company has been using this aura/lightning component on many of our lightning pages and it works very well. We borrowed the idea from the example in the link below. It's extremely useful to add fields to layouts this way. We can add multiple components to a single lightning page, and hide/show the component based on component visibility filters, which is awesome! Makes page layout work much easier.

My only complaint is that whenever we have an odd number of fields to display, the last field spans the length of 2 columns, making the UI look wonky. What can I add to this existing component and/or controller to prevent odd number of fields from spanning 2 columns?

I realize that I could simply change the number of columns to something other than 2, but I'm looking for a solution that works specifically with 2 column.

I imagine the code may need to check to make sure the number of columns selected is 2, check if there is an odd number of fields, and then prevent the last field from spanning 2 columns. Thanks for any suggestions!

Example of odd number of columns enter image description here

Sample code



<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:hasSObjectName" access="global" >

    <aura:attribute name="sObjectName" type="String" />
    <aura:attribute name="fieldNamesString" type="String" default="Name" access="global" />
    <aura:attribute name="fieldNames" type="String[]" access="global" />
    <aura:attribute name="mode" type="String" access="global" default="view" />
    <aura:attribute name="columns" type="Integer" access="global" default="2" />
    <aura:attribute name="header" type="String" access="global"  />

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <aura:if isTrue="{!v.header == null || !v.header == '' }">
        <lightning:recordForm recordId="{!v.recordId}" 
                              mode="{!v.mode}" />
        <aura:set attribute="else">   
            <lightning:accordion allowMultipleSectionsOpen="true" activeSectionName="A">
                <lightning:accordionSection name="A" label="{!v.header}" class="sectionHeader">
                    <lightning:recordForm recordId="{!v.recordId}" 
                                          mode="{!v.mode}" />


    doInit : function(component, event, helper) {
        let newFieldsArray = [];
        let fieldNamesString = component.get("v.fieldNamesString");
        if(fieldNamesString !== null && fieldNamesString !== undefined){
            let fieldsArray = fieldNamesString.split(",");
            for(let field of fieldsArray){
                field = field.trim();
            component.set("v.fieldNames", newFieldsArray);
  • Anyone able to help? Nov 13, 2020 at 21:24

1 Answer 1


I had a similar problem with this. lightning:recordForm seems to offer little in way of customization. I gave up as it seemed like it was going to be a pain in the ... So instead I used lightning:recordViewForm with outputField (i only required displaying fields, not editing them).

<lightning:recordViewForm recordId="{!v.recordId}" objectApiName="Object__c">                               
    <div class="slds-grid slds-wrap slds-grid--pull-padded slds-gutters  underline  ">
       <div class="slds-col slds-size_1-of-2">
       <lightning:outputField fieldName="Field1__c"/>
       <div class="slds-col slds-size_1-of-2">
       <lightning:outputField fieldName="Field2__c"/>
       <div class="slds-grid slds-wrap slds-grid--pull-padded slds-gutters underline">
       <div class="slds-col slds-size_1-of-2">
       <lightning:outputField fieldName="Field3__c"/>

The problem I had then was the format wasn't consistent with other items on the page, or in the solution, as the recordForm formats a boarder under the value, but when i added a bottom border it would span both the label and the avlue, which i did not want. This was overcome with a simple css override

.THIS .underline .slds-form-element .slds-form-element__static {
   border-bottom: 1px solid;
    border-color: rgb(0, 114, 206);


example of using lightning:recordForm example of using lightning:recordForm example of using lightning:recordViewForm example of using lightning:recordViewForm

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.