3

Trying to get a design that is configurable as either one or two columns. This uses a recordEditForm which make it challenging as the button MUST be between the recordEditForm tags.

current code:

<div class="{!if(v.twoColumnLayout,'slds-size_1-of-2','slds-size_1-of-1')}">
    <lightning:recordEditForm ....>
        <lightning:messages/>
        <aura:iteration items="..." var="f">
            <lightning:inputField fieldName="{!f}" id="{!f}"/>
        </aura:iteration>

        <lightning:button aura:id="submit-button" class="slds-m-top_small slds-align_absolute-center" type="submit" label="Click" variant="brand"/>
    </lightning:recordEditForm>
</div>
<aura:if isTrue="{!v.twoColumnLayout}">
    <div class="slds-size_1-of-2">
        <c:AnotherComponent ...../>
    </div>
</aura:if>

The issue here is the Lightning button

In single column mode everything is fine. But in two column mode the button is stuck within the confines of the slds-size_1-of-1 and I need it to be centered across both columns

Issue

I can get it working in the UI by putting the AnotherComponent within the recordEditForm as the below code shows BUT the recordEditForm breaks due to the lightning:inputs and a recordData form on the second component and throw an error about a field on the second component not being focusable....they do not play nice nested together

    <lightning:recordEditForm ....>
        <div class="{!if(v.twoColumnLayout,'slds-size_1-of-2','slds-size_1-of-1')}">

        <lightning:messages/>
        <aura:iteration items="..." var="f">
            <lightning:inputField fieldName="{!f}" id="{!f}"/>
        </aura:iteration>
       <aura:if isTrue="{!v.twoColumnLayout}">
            <div class="slds-size_1-of-2">
                <c:AnotherComponent ...../>
            </div>
       </aura:if>

        <lightning:button aura:id="submit-button" class="slds-m-top_small slds-align_absolute-center" type="submit" label="Click" variant="brand"/>
    </div>
    </lightning:recordEditForm>

So the only way the components work is in the first code example which gives me this

enter image description here

but I cannot seem to get the button to cover both columns due to it being constrained within the slds-size_1-of-2 parent div

Any Ideas including CSS hacks?

Current workaround

I have added margin-left: calc(100% - 30px); to the element and in the current container it does put it ...about... where I want it but seems a bit fragile to me

  • i thought that/think adding an aura:id to the record:Edit form allowes you to call submit() from a button that is not nested within the recordEdit form tag cmp.find('recordEditFormId').submit() – glls Feb 5 at 21:41
  • @glls - It does but it does not cause the overridden onsubmit method to be called. only the onsuccess and onerror are called. In my case I need to do some preprocessing in the onsubmit :( – Eric Feb 5 at 22:10
  • =( if you scope your css to position:absolute and set a width x and change margins and so on, you might achieve the positioning and large width imposed by the slds grid. – glls Feb 5 at 22:13
  • @glls - I got it to look "ok" with the margin-left: calc(100% - 30px) as posted above, on my screen at least.....maybe that is the best I can get...I am not a CSS wiz so any ideas at a more forgiving css that is responsive would be great. I do agree CSS may be the only way to go here – Eric Feb 5 at 22:15
1

A revised answer that uses a custom component with a lightning:recordEditForm in it and another nested component inside it that contains a force:recordData component w/ custom inputs.

The nested force:recordData component markup (c:q249238_2) came directly from this trailhead example so I won't post its markup here. My alteration to the trailhead markup was to hardcode an account id.

For the example below, I used lightning:layout to create the 2-column structure.

The lightning:button in the component calls the controller's handleSave function which finds the lightning:recordEditForm and calls it's submit method on click. This replaces the button directly in the edit form which had a type="submit" on it previously.

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >

    <lightning:layout horizontalAlign="space">
        <lightning:layoutItem>

            lightning:recordEditForm

            <lightning:recordEditForm aura:id="daForm" 
                                      recordId="0036A000001eZcVQAU"
                                      objectApiName="Contact">
                <!-- the messages component is for error messages -->
                <lightning:messages />

                <lightning:inputField fieldName="FirstName" />
                <lightning:inputField fieldName="LastName" />
                <lightning:inputField fieldName="Email" />


            </lightning:recordEditForm>
        </lightning:layoutItem>
        <lightning:layoutItem>

            <!-- custom component with force:recordEdit within -->
            force:recordEdit

            <c:q249238_2 />
        </lightning:layoutItem>
    </lightning:layout>

    <!-- button in its own div in the center of the outermost container -->
    <div class="slds-align_absolute-center slds-m-top_medium">
        <lightning:button class="slds-button_stretch" variant="brand" name="save" label="Save the lightning:recordEditForm" onclick="{!c.handleSave}" />
    </div>    
</aura:component>

({
    handleSave : function(component, event, helper) {
        var myForm = component.find('daForm');

        if (myForm.isValid()) {
            myForm.submit();
        }

    }
})

Resulting this in the UI, with functional buttons, etc.

enter image description here

  • 1
    Thank you for this. I have not had a chance to test it but since you did I assume it will work well. I bet there is something else going on that conflicts with this in my code. When I get time I am going to use this and add in elements from my component to see what breaks it. If I get a chance to do this I will update my question with the details. – Eric Feb 26 at 14:31
1

I'm going to take a guess at what you're after - feel free to ask me to adjust the markup if this isn't what you tried to describe.

I cannot seem to get the button to cover both columns due to it being constrained within the slds-size_1-of-2 parent div

The key to this is to get the button out of that parent div with the 1-of-2 class on it and into its own div which will take up 100% of the parent container (the form) width.

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >

    <lightning:recordEditForm recordId="0036A000001eZcVQAU"
                              objectApiName="Contact">
        <!-- the messages component is for error messages -->
        <lightning:messages />

        <!-- fields in the left column -->
        <div class="slds-size_1-of-2">
            <lightning:inputField fieldName="FirstName" />
            <lightning:inputField fieldName="LastName" />
            <lightning:inputField fieldName="Email" />
        </div>

        <!-- button in its own div in the center of the lightning:recordEditForm container -->
        <div class="slds-align_absolute-center slds-m-top_medium">
            <lightning:button variant="brand" type="submit" name="save" label="Save" />
        </div>
    </lightning:recordEditForm>


</aura:component>

Which renders like this:

enter image description here

Additionally if "cover both columns" means you want a button that stretches the full width of the container you can add the slds-button_stretch class to the button markup.

<div class="slds-align_absolute-center slds-m-top_medium">
    <lightning:button class="slds-button_stretch" variant="brand" type="submit" name="save" label="Save" />
</div>

enter image description here

  • Thanks Mark. Unfortunately I cannot take the button outside of the record edit form since it will not fire the on submit. I also cannot out the grid inside as the child component causes the record edit form in the parent to error in submit, most likely due to having the recorddata from the child inside the recordeditform of the parent – Eric Feb 6 at 4:04
  • @Eric, I'm confused. The button in my example is not outside of the lightning:recordEditForm and the markup above works perfectly when editing & saving the contact which it loads into the edit form. Can you clarify the question with more details about what it should look like in single column mode, 2 column mode and what error it is producing? – Mark Pond Feb 6 at 17:24
  • You are right. I read it wrong. Unfortunately the second part of my statement still is valid. I cannot put the grid inside the recordEditForm as the child component contains a recordData and needs to be inside the grid as the right column and when I do that I get a "..... field is not focusable" error when submitting the recordEditForm. the field that the error is about is on the child component so I think it is messing with it because it only does that when placed inside the recordEditForm. The second of my example shows this was attempted – Eric Feb 6 at 17:26
  • After re-reading and looking at your original question's markup, I'm pretty sure I see what you are going for... I'll post another answer as soon as I can. – Mark Pond Feb 6 at 20:34
  • Thanks. I may have to come up with a stripped down self contained example so the error can be seen. – Eric Feb 6 at 20:36

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.