You need to sign in to do that
Don't have an account?
Laurie Drew
Help displaying fields in center of screen
Can someone tell me how to change the sizes of input fields in my lightning component, I am using layout and layout item to get them centered on the screen, but I would like both columns to look more uniform. Also how would I get fields like Description to show more than one line like it does in the OOB Account creation screen?
Here is the code I have so thus far:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="PageHeading" type="String" default="New Property Space"/>
<aura:attribute name="PropertySpaceName" type="String"/>
<aura:attribute name="SpaceStatus" type="String[]" default="--None--,Vacant, Occupied, Pending"/>
<aura:attribute name="Property" type="String"/>
<aura:attribute name="SquareFootage" type="Integer"/>
<aura:attribute name="DesiredTenantNotes" type="Integer"/>
<aura:attribute name="PreviousIndustry" type="String[]" default="--None--, TBD"/>
<aura:attribute name="Tenant" type="String"/>
<aura:attribute name="LeaseEffectiveDate" type="Date"/>
<aura:attribute name="LeaseOpportunity" type="String"/>
<aura:attribute name="LeaseExpirationDate" type="Date"/>
<aura:attribute name="PropForm" type="PropertySpace__c" default="{'sobjectType': 'PropertySpace__c'}" />
<div class="slds-m-top--xx-large">
<div class="slds-page-header">
<div class="slds-align--absolute-center">
<div class="slds-text-heading--large">{!v.PageHeading}</div>
</div>
</div>
</div>
<br/>
<div class="slds-text-heading--medium">Information</div>
<div class="c-container">
<lightning:layout verticalAlign="center" class="large">
<lightning:layoutItem flexibility="auto" padding="around-small">
<lightning:input label="Property Space Name" name="PropertySpaceName" value="{!v.PropForm.Name}" />
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<lightning:select label="Space Status" name="SpaceStatus" value="{!v.PropForm.SpaceStatus__c}">
<aura:iteration items="{!v.SpaceStatus}" var="sstat">
<option value="{!sstat}" text="{!sstat}" />
</aura:iteration>
</lightning:select>
</lightning:layoutItem>
</lightning:layout>
<lightning:layout verticalAlign="center" class="large">
<lightning:layoutItem flexibility="auto" padding="around-small">
<lightning:input label="Property" name="Property" value="{!v.PropForm.Property__c}" />
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<lightning:input label="Square Footage" name="SquareFootage" value="{!v.PropForm.SquareFootage__c}" />
</lightning:layoutItem>
</lightning:layout>
<lightning:layout verticalAlign="center" class="large">
<lightning:layoutItem flexibility="auto" padding="around-small">
<lightning:input label="Desired Tenant Notes" name="DesiredTenantNotes" value="{!v.PropForm.DesiredTenantNotes__c }" />
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<lightning:select label="Previous Industry" name="PreviousIndustry" value="{!v.PropForm.PreviousIndustry__c }">
<aura:iteration items="{!v.PreviousIndustry}" var="pind">
<option value="{!pind}" text="{!pind}" />
</aura:iteration>
</lightning:select>
</lightning:layoutItem>
</lightning:layout>
<div class="slds-text-heading--medium">Current Tenant</div>
<lightning:layout verticalAlign="center" class="large">
<lightning:layoutItem flexibility="auto" padding="around-small">
<lightning:input label="Tenant" name="Tenant" value="{!v.PropForm.Tenant__c}" />
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<ui:inputDate aura:id="LeaseEffectiveDate" label="Lease Effective Date" class="field" value="{!v.PropForm.LeaseEffectiveDate__c}" displayDatePicker="true" />
</lightning:layoutItem>
</lightning:layout>
<lightning:layout verticalAlign="center" class="large">
<lightning:layoutItem flexibility="auto" padding="around-small">
<lightning:input label="Lease Opportunity" name="LeaseOpportunity" value="{!v.PropForm.LeaseOpportunity__c }" />
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<ui:inputDate aura:id="LeaseExpirationDate" label="Lease Expiration Date" class="field" value="{!v.PropForm.LeaseExpirationDate__c }" displayDatePicker="true" />
</lightning:layoutItem>
</lightning:layout>
</div>
</aura:component>
Here is a screenshot of the non-uniformity I am talking about:
Thank you in advance for any help provided!
Here is the code I have so thus far:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="PageHeading" type="String" default="New Property Space"/>
<aura:attribute name="PropertySpaceName" type="String"/>
<aura:attribute name="SpaceStatus" type="String[]" default="--None--,Vacant, Occupied, Pending"/>
<aura:attribute name="Property" type="String"/>
<aura:attribute name="SquareFootage" type="Integer"/>
<aura:attribute name="DesiredTenantNotes" type="Integer"/>
<aura:attribute name="PreviousIndustry" type="String[]" default="--None--, TBD"/>
<aura:attribute name="Tenant" type="String"/>
<aura:attribute name="LeaseEffectiveDate" type="Date"/>
<aura:attribute name="LeaseOpportunity" type="String"/>
<aura:attribute name="LeaseExpirationDate" type="Date"/>
<aura:attribute name="PropForm" type="PropertySpace__c" default="{'sobjectType': 'PropertySpace__c'}" />
<div class="slds-m-top--xx-large">
<div class="slds-page-header">
<div class="slds-align--absolute-center">
<div class="slds-text-heading--large">{!v.PageHeading}</div>
</div>
</div>
</div>
<br/>
<div class="slds-text-heading--medium">Information</div>
<div class="c-container">
<lightning:layout verticalAlign="center" class="large">
<lightning:layoutItem flexibility="auto" padding="around-small">
<lightning:input label="Property Space Name" name="PropertySpaceName" value="{!v.PropForm.Name}" />
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<lightning:select label="Space Status" name="SpaceStatus" value="{!v.PropForm.SpaceStatus__c}">
<aura:iteration items="{!v.SpaceStatus}" var="sstat">
<option value="{!sstat}" text="{!sstat}" />
</aura:iteration>
</lightning:select>
</lightning:layoutItem>
</lightning:layout>
<lightning:layout verticalAlign="center" class="large">
<lightning:layoutItem flexibility="auto" padding="around-small">
<lightning:input label="Property" name="Property" value="{!v.PropForm.Property__c}" />
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<lightning:input label="Square Footage" name="SquareFootage" value="{!v.PropForm.SquareFootage__c}" />
</lightning:layoutItem>
</lightning:layout>
<lightning:layout verticalAlign="center" class="large">
<lightning:layoutItem flexibility="auto" padding="around-small">
<lightning:input label="Desired Tenant Notes" name="DesiredTenantNotes" value="{!v.PropForm.DesiredTenantNotes__c }" />
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<lightning:select label="Previous Industry" name="PreviousIndustry" value="{!v.PropForm.PreviousIndustry__c }">
<aura:iteration items="{!v.PreviousIndustry}" var="pind">
<option value="{!pind}" text="{!pind}" />
</aura:iteration>
</lightning:select>
</lightning:layoutItem>
</lightning:layout>
<div class="slds-text-heading--medium">Current Tenant</div>
<lightning:layout verticalAlign="center" class="large">
<lightning:layoutItem flexibility="auto" padding="around-small">
<lightning:input label="Tenant" name="Tenant" value="{!v.PropForm.Tenant__c}" />
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<ui:inputDate aura:id="LeaseEffectiveDate" label="Lease Effective Date" class="field" value="{!v.PropForm.LeaseEffectiveDate__c}" displayDatePicker="true" />
</lightning:layoutItem>
</lightning:layout>
<lightning:layout verticalAlign="center" class="large">
<lightning:layoutItem flexibility="auto" padding="around-small">
<lightning:input label="Lease Opportunity" name="LeaseOpportunity" value="{!v.PropForm.LeaseOpportunity__c }" />
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<ui:inputDate aura:id="LeaseExpirationDate" label="Lease Expiration Date" class="field" value="{!v.PropForm.LeaseExpirationDate__c }" displayDatePicker="true" />
</lightning:layoutItem>
</lightning:layout>
</div>
</aura:component>
Here is a screenshot of the non-uniformity I am talking about:
Thank you in advance for any help provided!
You can use the below code:
<<<<----Lighting component --->>>>>
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi