7

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

4

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

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.