This question has been probably been asked many times in different forums. The hidden label in the lightning:select
is creating the additional space
Include class="slds-m-top_medium"
in the lightning:layoutItem
for the buttons. Also, include the verticalAlign="center"
in the lightning:layout
.
Code should be as follows:
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<aura:attribute name="buttonLabel" type="string" default="Search"/>
<aura:attribute name="isNewAvailable" type="boolean" default="true"/>
<lightning:layout horizontalAlign="center" verticalAlign="center">
<lightning:layoutItem padding="around-medium">
<lightning:select name="select1" label="Car Types" value="" aura:id="carType" variant="label-hidden">
<option value="" label="All Types"/>
<option value="" label="Luxury Cars"/>
<option value="" label="Sports Cars"/>
</lightning:select>
</lightning:layoutItem>
<lightning:layoutItem padding="around-medium" class="slds-m-top_medium">
<lightning:button variant="brand" label="{!v.buttonLabel}"/>
<aura:if isTrue="{!v.isNewAvailable}">
<lightning:button variant="neutral" label="New"/>
<aura:set attribute="else">
New button cannot be added here!!
</aura:set>
</aura:if>
</lightning:layoutItem>
</lightning:layout>
</aura:component>