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>
I need the output to be (my desired output):
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:
Best Answer
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: