0

I'm using lightning:recordEditForm with lightning:inputField to generate a list of fields. I dynamically create a lightning:inputField component and add it to an slds column. The lightning:recordEditForm places the label of checkbox fields next to the checkbox which throws off all of the formatting. See image for example:

enter image description here

Is there a way to keep the spacing consistent with checkboxes? I don't care about getting the label above the checkbox, I just want to keep the spacing between each field consistent.

lighting:inputField Component:

<aura:component>
    <aura:attribute name="divId" type="String" />
    <aura:attribute name="inputFieldId" type="String" />
    <aura:attribute name="fieldName" type="String"/>
    <div aura:id="{!v.divId}">           
        <lightning:inputField aura:id="{!v.inputFieldId}" fieldName=" {!v.fieldName }" />
    </div>
</aura:component>

Here is where the component exists in my base component:

<lightning:recordEditForm aura:id="editForm" recordId="{!v.CallTrackingId}" objectApiName="CallTracking__c" onsubmit="{!c.saveCallTracking}" >
        <lightning:button variant="brand" name="save" type = "submit" label="Save" class="slds-m-top_medium"/>
        <lightning:button variant="brand" name="cancel" label="Cancel" onclick="{!c.closeCallTracking}" class="slds-m-top_medium"/>
        <lightning:messages />           
            <div class="slds-grid slds-wrap slds-gutters slds-cell-wrap ">                  
            <div class="slds-col slds-p-horizontal_medium" >  
                {!v.editFields1}
            </div>         
            <div class="slds-col">
                {!v.editFields2}
            </div> 
                </div>
</lightning:recordEditForm>

Here is where I create the component in the helper:

for(var i = 0; i < Math.ceil(editFieldsToRender.length/2); i++) 
        {    
            $A.createComponent
            (
                "c:LightningInputFieldWithDiv",
                {
                    "divId": editFieldsToRender[i]+"Div",
                    "inputFieldId": editFieldsToRender[i],
                    "fieldName": editFieldsToRender[i]+"__c"
                },
                function(newInputField)
                {
                        editFields1.push(newInputField);
                        component.set("v.editFields1", editFields1);
                }
            );
        }

Any suggestions on keeping the row heights consistent would be much appreciated.

  • Hi @ztrition. How would you like the checkbox to be displayed on the page? Would you prefer the checkbox to be aligned with the input field on the left? – Martin Lezer Oct 18 '18 at 15:02
  • I want the checkbox to be aligned with the field on the left. Moreso, I need the spacing around the element to be the same, so if I added another field underneath it it would also continue to line up fine. – ztrition Oct 18 '18 at 15:06
1

fyi: the field is aligned with the component's label, you will need to add padding or a marginf for checkbox types.

Additionally, you will probably want to use lightning:layout components for a better styling and uniformity of spacing amongst the different components you are rendering, for example:

<lightning:layout multipleRows="true">
        <lightning:layoutItem size="4" padding="around-small">
            <div class="custom-box">1</div>
        </lightning:layoutItem>
        <lightning:layoutItem size="4" padding="around-small">
            <div class="custom-box">2</div>
        </lightning:layoutItem>
        <lightning:layoutItem size="4" padding="around-small">
            <div class="custom-box">3</div>
        </lightning:layoutItem>
        <lightning:layoutItem size="4" padding="around-small">
            <div class="custom-box">4</div>
        </lightning:layoutItem>
        <lightning:layoutItem size="4" padding="around-small">
            <div class="custom-box">5</div>
        </lightning:layoutItem>
    </lightning:layout>

you can easily control the sizing and padding in between items with the above approach.

so, you can replace

<div class="slds-grid slds-wrap slds-gutters slds-cell-wrap ">                  
        <div class="slds-col slds-p-horizontal_medium" >  

with the aformentioned components

one thing i did notice, is that for the checkbox to fully allign with your requirements, a top margin/padding would need to be added to the layoutItem:

markup example in a lightning app:

<aura:application extends="force:slds">
    <lightning:layout multipleRows="true">
        <lightning:layoutItem size="6" padding="around-small">
            <lightning:input name="input1" label="Enter some text" />
        </lightning:layoutItem>
        <lightning:layoutItem size="6" padding="around-small">
            <lightning:input name="input1" label="Enter some text" />
        </lightning:layoutItem>
        <lightning:layoutItem size="6" padding="around-small">
            <lightning:input name="input1" label="Enter some text" />
        </lightning:layoutItem>
        <lightning:layoutItem size="6" padding="around-small" class="slds-m-top_large">
            <lightning:input type="checkbox" label="Basic option" name="input1"/>
        </lightning:layoutItem>
    </lightning:layout>
</aura:application>

enter image description here

  • Your example looks good. Can this be used with lightning:recordEditForm? I see you are using lightning:input does that work instead of lightning:inputField? – ztrition Oct 18 '18 at 20:47
  • you can, however, the level of effort will be considerably higher, since you will later need to assign the values of the input fields to the lightning:inputfields manually – glls Nov 3 '18 at 17:13

Your Answer

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

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