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:
