Preventing odd number of fields in lightning:recordForm from spanning 2 columns

Question

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

Sample code

https://github.com/philldrum/Layout_Component

Component

<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}" 
                              objectApiName="{!v.sObjectName}" 
                              fields="{!v.fieldNames}"  
                              columns="{!v.columns}" 
                              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}" 
                                          objectApiName="{!v.sObjectName}" 
                                          fields="{!v.fieldNames}" 
                                          columns="{!v.columns}" 
                                          mode="{!v.mode}" />
                </lightning:accordionSection>
            </lightning:accordion>
        </aura:set>
    </aura:if>
</aura:component>

Controller

({
    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();
                newFieldsArray.push(field);
            }
            component.set("v.fieldNames", newFieldsArray);
        }
    }
})

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>
       <div class="slds-col slds-size_1-of-2">
       <lightning:outputField fieldName="Field2__c"/>
       </div>
       </div>
       <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"/>
       </div>
    </div>                
 </lightning:recordViewForm>  

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:recordViewForm