Pull an item outside of slds-grid

Question

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

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

Answer 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.

Answer 2

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:

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>