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

Improve this question

1 Answer 1

Reset to default
4

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

Improve this answer
4
  • No its not working. Getting same result.
    – Avijit
    Commented Mar 11, 2018 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
    Commented Mar 11, 2018 at 20:26
  • SfdcHawkeye: Its working now.
    – Avijit
    Commented Mar 11, 2018 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 ♦
    Commented Mar 11, 2018 at 23:53

You must log in to answer this question.

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