function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Laurie DrewLaurie 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:

User-added image

Thank you in advance for any help provided!
Best Answer chosen by Laurie Drew
Ajay K DubediAjay K Dubedi
Hi Laurie Drew,

You can use the below code:

<<<<----Lighting component --->>>>>
 
<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-box" style="padding:4rem; border:0px" >
        <div class="slds-text-heading--medium" style="padding-left:1rem">Information</div>
        
    <lightning:layout verticalAlign="center" class="large">
        <lightning:layoutItem size="6" padding="around-small">
            <lightning:input label="Property Space Name" name="PropertySpaceName" value="{!v.PropForm.Name}" />       
        </lightning:layoutItem>
        <lightning:layoutItem size="6"  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="" class="large">
        <lightning:layoutItem size="6" padding="around-small">
            <lightning:input label="Property" name="Property" value="{!v.PropForm.Property__c}" />       
        </lightning:layoutItem>
        <lightning:layoutItem size="6" 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 size="6" padding="around-small">
            <lightning:input label="Desired Tenant Notes" name="DesiredTenantNotes" value="{!v.PropForm.DesiredTenantNotes__c }" />       
        </lightning:layoutItem>
        <lightning:layoutItem size="6" 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" style="padding-left:1rem">Current Tenant</div> 
        
    <lightning:layout verticalAlign="center" class="large">
        <lightning:layoutItem size="6" padding="around-small">
            <lightning:input label="Tenant" name="Tenant" value="{!v.PropForm.Tenant__c}" />       
        </lightning:layoutItem>
        <lightning:layoutItem size="6" 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 size="6" padding="around-small">
            <lightning:input label="Lease Opportunity" name="LeaseOpportunity" value="{!v.PropForm.LeaseOpportunity__c }" />       
        </lightning:layoutItem>
        <lightning:layoutItem size="6" 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>

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks,
Ajay Dubedi