You need to sign in to do that
Don't have an account?
sai sekhar 1
Lightning Component Framework Specialist step 2
Hi,
Why my component aligned to left.Please check my code.
Searchform:
<article class="slds-card slds-m-bottom_large">
<div class="slds-media__body">
<div >
<lightning:layout horizontalAlign="center" verticalAlign="end">
<lightning:layoutItem padding="horizontal-medium" >
<!-- Create a dropdown menu with options -->
<lightning:select aura:id="boatTypes" label="" name="selectType"
onchange="{!c.handleChange}">
<option value="">All Types</option>
<aura:iteration items="{!v.BoatTypes}" var="boatType">
<option value="{!boatType.Id}" text="{!boatType.Name}"/>
</aura:iteration>
</lightning:select>
</lightning:layoutItem>
<lightning:layoutItem>
<div class="slds-button-group" role="group">
<lightning:button class="slds-button" variant="brand" label="Search" onclick="{!c.search}"/>
<aura:if isTrue="{!v.renderNew}">
<lightning:button class="slds-button" variant="neutral" label="New" onclick="{!c.newBoat}"/>
</aura:if>
</div>
</lightning:layoutItem>
</lightning:layout>
</div>
</div>
</article>
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<lightning:layout >
<lightning:card title="Find a Boat" class="slds-m-top--medium" >
<c:BoatSearchForm />
</lightning:card>
</lightning:layout>
<lightning:layout >
<lightning:card title="Matching Boats" class="slds-m-top--medium">
<c:BoatSearchResults/>
</lightning:card>
</lightning:layout>
</aura:component>
Why my component aligned to left.Please check my code.
Searchform:
<article class="slds-card slds-m-bottom_large">
<div class="slds-media__body">
<div >
<lightning:layout horizontalAlign="center" verticalAlign="end">
<lightning:layoutItem padding="horizontal-medium" >
<!-- Create a dropdown menu with options -->
<lightning:select aura:id="boatTypes" label="" name="selectType"
onchange="{!c.handleChange}">
<option value="">All Types</option>
<aura:iteration items="{!v.BoatTypes}" var="boatType">
<option value="{!boatType.Id}" text="{!boatType.Name}"/>
</aura:iteration>
</lightning:select>
</lightning:layoutItem>
<lightning:layoutItem>
<div class="slds-button-group" role="group">
<lightning:button class="slds-button" variant="brand" label="Search" onclick="{!c.search}"/>
<aura:if isTrue="{!v.renderNew}">
<lightning:button class="slds-button" variant="neutral" label="New" onclick="{!c.newBoat}"/>
</aura:if>
</div>
</lightning:layoutItem>
</lightning:layout>
</div>
</div>
</article>
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<lightning:layout >
<lightning:card title="Find a Boat" class="slds-m-top--medium" >
<c:BoatSearchForm />
</lightning:card>
</lightning:layout>
<lightning:layout >
<lightning:card title="Matching Boats" class="slds-m-top--medium">
<c:BoatSearchResults/>
</lightning:card>
</lightning:layout>
</aura:component>
Hi Sai,
To bring your lightning component in the center you can use- <lightning:layoutItem flexibility="auto" padding="horizontal-medium" > for the items you want to bring in center.
Hope this helps.
Best Regards,
Shubham Nandwana.
AppPerfect Corp.
salesforce@appperfect.com
408-252-4100
http://www.appperfect.com/services/salesforce/