+ Start a Discussion
sai sekhar 1sai 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>

User-added image
Shubham NandwanaShubham Nandwana

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/