8

I want to make some part of components to left and some part to right.

In the below markup, I want to make first lightning:layoutItem to align left and rest of it to align to right. How can I achieve it?

<lightning:layout horizontalAlign="left" verticalAlign="end">
        <lightning:layoutItem class="slds-p-around_xxx-small">
            <lightning:select aura:id="pageSize" label="Records per page:" onchange="{!c.onPageSizeChange}">
                <option value="10" selected="true">10</option>
                <option value="30">30</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="150">150</option>
                <option value="200">200</option>
            </lightning:select>
        </lightning:layoutItem>
        <!-- I want to make right alignment from here-->
        <lightning:layoutItem class="slds-p-around_xxx-small">
            <lightning:select aura:id="searchBy" label="Search By">
                <option value="-1" selected="true">--None--</option>
                <option value="Name">Credit Customer</option>
                <option value="Return_Type__c">Return Type</option>
                <option value="Cycle__c">Cycle</option>
                <option value="Return_Authorization__c">Return Auth</option>
                <option value="Status__c">Status</option>
            </lightning:select>
        </lightning:layoutItem>
        <lightning:layoutItem class="slds-p-around_xxx-small">
            <lightning:input aura:id="txtSearchBy" label='' name="txtSearchBy" placeholder="Enter search text here"/> 
        </lightning:layoutItem>
        <lightning:layoutItem class="slds-p-around_xxx-small">
            <lightning:buttonIcon iconName="utility:search" variant="brand" title="Search"/>
        </lightning:layoutItem>
        <lightning:layoutItem class="slds-p-around_xxx-small">
            <lightning:buttonIcon iconName="utility:refresh" variant="brand" title="Reset Search"/>
        </lightning:layoutItem>
        <!-- End of right align -->
</lightning:layout>

Alignment

I need the output to be (my desired output):

enter image description here

Update:

As per suggestion, I did below.

<lightning:layout verticalAlign="end">
        <lightning:layoutItem class="left-align" size="2">
            <lightning:select aura:id="pageSize1" label="Records per page:" onchange="{!c.onPageSizeChange}">
                <option value="10" selected="true">10</option>
                <option value="30">30</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="150">150</option>
                <option value="200">200</option>
            </lightning:select>
        </lightning:layoutItem>
        <lightning:layoutItem class="right-align" size="2">
            <lightning:select aura:id="searchBy" label="Search By">
                <option value="-1" selected="true">--None--</option>
                <option value="Name">Credit Customer</option>
                <option value="Return_Type__c">Return Type</option>
                <option value="Cycle__c">Cycle</option>
                <option value="Return_Authorization__c">Return Auth</option>
                <option value="Status__c">Status</option>
            </lightning:select>
        </lightning:layoutItem>
        <lightning:layoutItem class="right-align" size="7">
            <lightning:input aura:id="txtSearchBy" label='' name="txtSearchBy" placeholder="Enter search text here"/> 
        </lightning:layoutItem>
        <lightning:layoutItem class="slds-p-around_xxx-small right-align">
            <lightning:buttonIcon iconName="utility:search" variant="brand" title="Search"/>
        </lightning:layoutItem>
        <lightning:layoutItem class="slds-p-around_xxx-small right-align">
            <lightning:buttonIcon iconName="utility:refresh" variant="brand" title="Reset Search"/>
        </lightning:layoutItem>
</lightning:layout>

Output:

enter image description here

2 Answers 2

5

horizontalAlign is used to position the grid elements within the grid, not for aligning content, which I suspect is your intent.

If you want to align the individual child elements, use normal CSS for that:

<aura:component>
    <lightning:layout>
        <lightning:layoutItem size="8" class="left-align">
            ... Left Content ...
        </lightning:layoutItem>
        <lightning:layoutItem size="4" class="right-align">
            ... Right Content ...
        </lightning:layoutItem>
    </lightning:layout> 
</aura:component>

.THIS .left-align {
    text-align: left;
}
.THIS .right-align {
    text-align: right;
}
4
  • I did as per your comments but not getting expected output.
    – Avijit
    May 7, 2018 at 13:31
  • See my updated post.
    – Avijit
    May 7, 2018 at 13:38
  • @Avijit You need to specify size attributes for the lightning:layoutItem elements for them to work as you expect.
    – sfdcfox
    May 7, 2018 at 15:27
  • I put size attributes but some how its not showing up my desired output.
    – Avijit
    May 7, 2018 at 19:30
3

I realize this is an old post, but with lightning-layout-item it looks like the 'alignment-bump' attribute will do what op is looking for.

<lightning-layout-item alignment-bump="right">...</lightning-layout-item>

https://developer.salesforce.com/docs/component-library/bundle/lightning-layout-item/specification

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .