1

I am new to lightning development. I was trying to learn about <lightning:layout> and <lightning:layoutItem> and came across one issue.

I have created two lightning layout items in a lightning layout. and keep the horizontal alignment as a center with the code <lightning:layout horizontalAlign="center">

but two layout items are not horizontally aligned properly. Please refer below screenshot. enter image description here

Following is the code of the component

<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">
        <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">
            <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>

2 Answers 2

4

This question has 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>
1
2

Hi I had the same Issue working with the <lightning-layout-item>, though in LWC and not in Aura Component. As pointed out by arut's answer it is happening because of the space occupied by label attribute.

I have tested in LWC that if you pass an attribute variant="label-hidden" in the component occupied by lightning layout which is lightning:select in your case than that space will vanish and it will align with the buttons.

Here's my example for people looking for the similar problem in LWC:

<lightning-layout horizontal-align="space">
    <lightning-layout-item size="3" padding="around-small">
        <lightning-input onchange={doSearchTermChange} value={searchTerm}
          placeholder="Search something" variant="label-hidden"
          type="search">
        </lightning-input>
    </lightning-layout-item>
    <lightning-layout-item size="3" padding="around-small">
        <lightning-combobox
          name="Views"
          value={selectedListView}
          placeholder="Select a View"
          options={listViews}
          variant="label-hidden"
          disabled={shalldisableListView}
          onchange={handleViewChange}>
        </lightning-combobox>
</lightning-layout-item>

So, I have added attribute variant="label-hidden" in both the components inside the lightning layout-item i.e., lightning-input and lightning-combobox.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.