You need to sign in to do that
Don't have an account?
sindhu yandra
Hi Every one my question is related to UI of lightning component . i need the fields side by side and Popualte the parent value by lookup...can any one help in this
Component:
<aura:component controller="cmpaddressesController"
implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride" >
<aura:attribute name="newAddress" type="Address__c"
default="{ 'sobjectType': 'Address__c',
'Address_Line_1__c': '',
'Address_Line_2__c': '',
'Address_Validation_Status__c': '',
'Address_Validation_Timestamp__c': '',
'City__c':'',
'State__c':'',
'Country__c':'',
'Zip_Code__c':'',
'Preferred__c': false }"/>
<aura:attribute name="Addresses" type="Address__c[]"/>
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
<lightning:spinner aura:id="largeSpinner" variant="brand" size="large" class="slds-hide"/>
<div>
<section aura:id="createDialog" role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container adjust_container">
<header class="slds-modal__header">
<h2 class="slds-text-heading--medium">Add Address Details</h2>
</header>
<div class="slds-modal__content slds-p-around--medium slds-grid slds-wrap">
<ui:scrollerWrapper>
<!-- CREATE NEW ADDRESS FORM -->
<form class="row">
<label>Name</label>
<force:inputField value="{!v.newAddress.AccountId__c}" />
<br></br>
<lightning:input type="checkbox" aura:id="addressform" label="Preferred"
name="Preferred"
checked="{!v.newAddress.Preferred__c}"/>
<lightning:input type="text" aura:id="addressform" label="Address Line 1"
name="Address Line 1"
value="{!v.newAddress.Address_Line_1__c}"
required="true"/>
<lightning:input type="text" aura:id="addressform" label="Address Line 2"
name="Address Line 2"
value="{!v.newAddress.Address_Line_2__c}"/>
<lightning:input type="text" aura:id="addressform" label="Address Validation Status"
name="Address Validation Status"
value="{!v.newAddress.Address_Validation_Status__c}" />
<lightning:input type="text" aura:id="addressform" label="City"
name="City"
value="{!v.newAddress.City__c}"
required="true"/>
<lightning:input type="text" aura:id="addressform" label="State"
name="State"
value="{!v.newAddress.State__c}"
required="true"/>
<lightning:input type="Number" aura:id="addressform" label="Zip Code"
name="Zip Code"
value="{!v.newAddress.Zip_Code__c}"
required="true"/>
<lightning:input type="text" aura:id="addressform" label="Country"
name="Country"
value="{!v.newAddress.Country__c}"/>
<lightning:input type="datetime" name="Address Validation Timestamp" label="Address Validation Timestamp" value="{!v.newAddress.Address_Validation_Timestamp__c}" />
<p><lightning:inputLocation label="Geo Location" value="{!v.newAddress.Geocode__c}"/> </p>
<lightning:button label="Create Address"
class="slds-m-top--medium"
variant="brand"
onclick="{!c.clickCreate}"/>
</form>
<!-- / CREATE NEW Address FORM -->
</ui:scrollerWrapper>
</div>
</div>
</section>
</div>
</aura:component>
<aura:component controller="cmpaddressesController"
implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride" >
<aura:attribute name="newAddress" type="Address__c"
default="{ 'sobjectType': 'Address__c',
'Address_Line_1__c': '',
'Address_Line_2__c': '',
'Address_Validation_Status__c': '',
'Address_Validation_Timestamp__c': '',
'City__c':'',
'State__c':'',
'Country__c':'',
'Zip_Code__c':'',
'Preferred__c': false }"/>
<aura:attribute name="Addresses" type="Address__c[]"/>
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
<lightning:spinner aura:id="largeSpinner" variant="brand" size="large" class="slds-hide"/>
<div>
<section aura:id="createDialog" role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container adjust_container">
<header class="slds-modal__header">
<h2 class="slds-text-heading--medium">Add Address Details</h2>
</header>
<div class="slds-modal__content slds-p-around--medium slds-grid slds-wrap">
<ui:scrollerWrapper>
<!-- CREATE NEW ADDRESS FORM -->
<form class="row">
<label>Name</label>
<force:inputField value="{!v.newAddress.AccountId__c}" />
<br></br>
<lightning:input type="checkbox" aura:id="addressform" label="Preferred"
name="Preferred"
checked="{!v.newAddress.Preferred__c}"/>
<lightning:input type="text" aura:id="addressform" label="Address Line 1"
name="Address Line 1"
value="{!v.newAddress.Address_Line_1__c}"
required="true"/>
<lightning:input type="text" aura:id="addressform" label="Address Line 2"
name="Address Line 2"
value="{!v.newAddress.Address_Line_2__c}"/>
<lightning:input type="text" aura:id="addressform" label="Address Validation Status"
name="Address Validation Status"
value="{!v.newAddress.Address_Validation_Status__c}" />
<lightning:input type="text" aura:id="addressform" label="City"
name="City"
value="{!v.newAddress.City__c}"
required="true"/>
<lightning:input type="text" aura:id="addressform" label="State"
name="State"
value="{!v.newAddress.State__c}"
required="true"/>
<lightning:input type="Number" aura:id="addressform" label="Zip Code"
name="Zip Code"
value="{!v.newAddress.Zip_Code__c}"
required="true"/>
<lightning:input type="text" aura:id="addressform" label="Country"
name="Country"
value="{!v.newAddress.Country__c}"/>
<lightning:input type="datetime" name="Address Validation Timestamp" label="Address Validation Timestamp" value="{!v.newAddress.Address_Validation_Timestamp__c}" />
<p><lightning:inputLocation label="Geo Location" value="{!v.newAddress.Geocode__c}"/> </p>
<lightning:button label="Create Address"
class="slds-m-top--medium"
variant="brand"
onclick="{!c.clickCreate}"/>
</form>
<!-- / CREATE NEW Address FORM -->
</ui:scrollerWrapper>
</div>
</div>
</section>
</div>
</aura:component>
Mark as best answer, If it resloves !! In above code output is
So you need to place you fields inside div tags
need more info check these
https://www.lightningdesignsystem.com/utilities/grid/
Mark as resloved if it helps :) :)
Thanks,
Bhanu Prakash
visit ForceLearn.com
Issue is resolved. Thank You