0

I want to align below elements (select and two buttons) in same line.

<aura:component >
    <aura:attribute name="attr_selectTypeBoat" type='String[]' default='All Types'/>
    <lightning:layout horizontalAlign="center">
            <lightning:layoutItem flexibility="auto" padding="around-small" >
                <lightning:select aura:id="selectTypeBoat" name="selectType" label='Please select'>
                    <aura:iteration items='{!v.attr_selectTypeBoat}' var='option'>
                        <option value='{!option}' text='{!option}' />
                    </aura:iteration>
                </lightning:select>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small" >
                <lightning:button label="Search" variant="brand"/>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <lightning:button label="New" variant="neutral"/>
            </lightning:layoutItem>
        </lightning:layout>
</aura:component>

But I am getting below output. How can I solve it?

enter image description here

3

Tried to change the value of the flexibility attribute from "auto" to "no-flex" and it didn't resolve the issue.

It seems the component is designed so that the label is positioned above the select list. Short of writing some custom CSS, you could add verticalAlign="end" to the lightning:layout component and that aligns all the bottoms at least

  • No its not working. Getting same result. – Avijit Mar 11 '18 at 20:13
  • 1
    It seems the component is designed so that the label is positioned above the select list. Short of writing some custom CSS, you could add verticalAlign="end" to the lightning:layout component and that aligns all the bottoms at least. – SfdcHawkeye Mar 11 '18 at 20:26
  • SfdcHawkeye: Its working now. – Avijit Mar 11 '18 at 20:43
  • Please edit your answer with any additional clarifications. @Avijit If this answer helped you resolve your question, please accept it by clicking the checkmark next to it. – Adrian Larson Mar 11 '18 at 23:53

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.