0

I am creating a lightning component that pops up from a button on Opportunity.

In this lightning component I am using multiple recordEditForm tags that are just outside tab tags.

When setting the classes it displays one form on the left but when going onto another tab that uses a different recordEditForm it pushes this form over to the right of the screen as if the other was still displayed.

Here is some snippets of my code that will hopefully help!

<aura:html tag="style">
    .slds-modal__container{
    height : auto;
    min-width: 90vw;
    }

    .slds-modal__content{
    overflow: auto;
    width: 100%;
    clear: left;
    display: block;
    }

    .customFooter{
    display: inline !important;
    }

</aura:html> 

This is in my component to set the style of the pop up /\

<lightning:tabset selectedTabId="{!v.selTabId}" variant="vertical">
        <lightning:recordEditForm objectApiName="Factfind2_0__c" aura:id="firstPage"
                                  onsubmit="{!c.submitFP}"
                                  onsuccess="{!c.handleSuccess}"
                                  class="slds-modal__content"
                                  >
            <lightning:tab label="Objectives" id="Objective">

                <h2>TFC Section</h2>
                <p>This is the record id {!v.recordId}</p>

                <div style="padding: 14px;">                

                    <lightning:inputField fieldName="Opportunity__c" value="{!v.recordId}"/> 
                    <p/><br/>
                    <lightning:inputField fieldName="Name"/>
                    <p/><br/>
                    <aura:iteration items="{!v.listAccs}" var="acc">
                        <lightning:inputField fieldName="Account__c" value="{!acc.AccountId}"/>
                    </aura:iteration>
                    <p/><br/>
                    <lightning:inputField fieldName="WantsImmediateTFC__c"/>
                    <p/><br/>
                    <lightning:inputField fieldName="RequiredTFCAmount__c"/>
                </div>

                <p/><br/>

                <!-- Objectives table -->
                <table>

                    <tr>

                        <td>
                            Objective 1
                        </td>
                        <td>
                            Amount 1
                        </td>

                    </tr>

                    <tr>
                        <td>
                            Objective 2
                        </td>
                        <td>
                            Amount 2
                        </td>
                    </tr>

                    <tr>
                        <td>
                            Objective 3
                        </td>
                        <td>
                            Amount 3
                        </td>
                    </tr>

                    <tr>
                        <td>
                            Objective 4
                        </td>
                        <td>
                            Amount 4
                        </td>
                    </tr>
                </table>

This is part of my tabset and one record edit form, included some of the table to show how its laid out to /\

 <lightning:tab label="Fact Find Complete" id="Complete">
            Fact Find has been completed!
        </lightning:tab>

        <lightning:recordEditForm objectApiName="Budget_Planner__c" aura:id="budgetPlanner">
        <lightning:tab label="Budget Planner" id="BudgetPlan">


                <h2>Budget Planner</h2>

                <table>

                    <tr>

                        <td>
                            <lightning:inputField fieldName="Name"/>
                        </td>
                        <td>
                            <lightning:inputField fieldName="Opportunity__c" value="{!v.recordId}"/>
                        </td>

                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="MainEmploymentNetMonthlyIncome__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="TotalAmountOfStateBenefits__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="OtherIncomeTotalAmount__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="PartnersNetMonthlyIncome__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="TotalNetMonthlyIncomeWithPartner__c"/>
                        </td>
                        <td>
                            <lightning:inputField fieldName="TotalNetMonthIncomeWithoutPartner__c"/>
                        </td>
                    </tr>

                    <tr>

                        <td>
                            <lightning:inputField fieldName="X1MortgageOrRentalPayments__c"/>
                        </td>
                        <td>
                            <lightning:inputField fieldName="X1PaymentsContinueIntoRetirement__c"/>
                        </td>

                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X1ReducePaymentsInRetirementBy__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X2LoanOrCreditCardRepayments__c"/>
                        </td>
                        <td>
                            <lightning:inputField fieldName="X2PaymentsContinueIntoRetirement__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X2ReducePaymentsInRetirementBy__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X3OtherDebtPayments__c"/>
                        </td>
                        <td>
                            <lightning:inputField fieldName="X3PaymentsContinueIntoRetirement__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X3ReducePaymentsInRetirementBy__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X4MonthlyUtilityExpenses__c"/>
                        </td>
                        <td>
                            <lightning:inputField fieldName="X4PaymentsContinueIntoRetirement__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X4ReducePaymentsInRetirementBy__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X5MonthlyGroceryExpenses__c"/>
                        </td>
                        <td>
                            <lightning:inputField fieldName="X5PaymentsContinueIntoRetirement__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X5ReducePaymentsInRetirementBy__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X6MonthlyClothingExpenses__c"/>
                        </td>
                        <td>
                            <lightning:inputField fieldName="X6PaymentsContinueIntoRetirement__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X6ReducePaymentsInRetirementBy__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X7MonthlyPhoneAndInternetExpenses__c"/>
                        </td>
                        <td>
                            <lightning:inputField fieldName="X7PaymentsContinueIntoRetirement__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X7ReducePaymentsInRetirementBy__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X8MonthlyEntertainmentExpenses__c"/>
                        </td>
                        <td>
                            <lightning:inputField fieldName="X8PaymentsContinueIntoRetirement__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X8ReducePaymentsInRetirementBy__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X9MonthlyCarOrTravelExpenses__c"/>
                        </td>
                        <td>
                            <lightning:inputField fieldName="X9PaymentsContinueIntoRetirement__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X9ReducePaymentsInRetirementBy__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X10MonthlyMaintenanceExpenses__c"/>
                        </td>
                        <td>
                            <lightning:inputField fieldName="X10PaymentsContinueIntoRetirement__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X10ReducePaymentsInRetirementBy__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X11MonthlyNetPensionContributions__c"/>
                        </td>
                        <td>
                            <lightning:inputField fieldName="X11PaymentsContinueIntoRetirement__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X11ReducePaymentsInRetirementBy__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X12MonthlyInsuranceExpenses__c"/>
                        </td>
                        <td>
                            <lightning:inputField fieldName="X12PaymentsContinueIntoRetirement__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X12ReducePaymentsInRetirementBy__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X13MonthlyOtherExpenses__c"/>
                        </td>
                        <td>
                            <lightning:inputField fieldName="X13PaymentsContinueIntoRetirement__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X13ReducePaymentsInRetirementBy__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X14_Council_Tax__c"/>
                        </td>
                        <td>
                            <lightning:inputField fieldName="X14_Payments_continue_into_retirement__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X14_Reduce_payments_in_retirement_by__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X15regularMonthlySavings__c"/>
                        </td>
                        <td>
                            <lightning:inputField fieldName="X15paymentsContinueIntoRetirement__c"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <lightning:inputField fieldName="X15reducePaymentsInRetirementBy__c"/>
                        </td>
                    </tr>
                </table>

        </lightning:tab>
        </lightning:recordEditForm>

This is my other recordEditForm the one that is getting pushed over, I know that the same class is not applied to this code right now but when i d it breaks the other tabs to and makes them not the whole width of the modal.

Some screenshots of what it looks like: working tab

broken tab

0

For the record form, can you try placing the lightning:recordEditForm inside of the lightning:tab rather than how it is right now?

Like this:

<lightning:tab label="Budget Planner" id="BudgetPlan">
    <lightning:recordEditForm objectApiName="Budget_Planner__c" aura:id="budgetPlanner">
.
.
.
.
    </lightning:recordEditForm>
</lightning:tab>

Let me know if it works.

1
  • Hiya mate, for the budget planner I can nest it inside the lightning:tab but for the factfind object I cannot do this due to needing multiple tabs inside the recordEditForm if I was to do this then I would need a recordEditForm inside each tab, wouldn't this affect the speed of the component and the save handler would be a pain right? – JackDower Sep 16 '19 at 7:40

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.