5

I am using the following lightning:layout grid to get input field and button to behave nicely:

<lightning:layout verticalAlign="end">
        <lightning:layoutitem padding="around-small" size="8" flexibility="auto">
            <lightning:input label="Enter Id" name="recordId" minlength="15" maxlength="18"/>
        </lightning:layoutitem>
        <lightning:layoutitem padding="around-small" size="4" flexibility="auto">            
            <lightning:button variant="neutral" title="Click to retrieve fields" label="Retrieve" type="Submit" iconName="utility:search" iconPosition="left" onclick="" />
        </lightning:layoutitem>
    </lightning:layout>

All looks pretty:

Pretty version

Until the validation pops up and the buttons gets displaced:

Displaced button

How would I get this sorted out without using too much custom CSS if any? Maybe even using lightning:layout alone?

0

2 Answers 2

7

My advice, try to use the native css classes, you just need to add

slds-form slds-form_horizontal

wrapping everything in it

<lightning:layout verticalAlign="end" class="slds-form slds-form_horizontal">
    <lightning:layoutitem padding="around-small" size="8" flexibility="auto">
        <lightning:input label="Enter Id" name="recordId" minlength="15" maxlength="18"/>
    </lightning:layoutitem>
    <lightning:layoutitem padding="around-small" size="4" flexibility="auto">            
        <lightning:button variant="neutral" title="Click to retrieve fields" label="Retrieve" type="Submit" iconName="utility:search" iconPosition="left" onclick="" />
    </lightning:layoutitem>
</lightning:layout>

https://www.lightningdesignsystem.com/components/form-element/#Form-Label

1
  • Trying to make this work in LWC. It doesn't work even if I wrap everything inside. layout and layout item with form classes. jsfiddle.net/vem728uy
    – Yogesh D
    Commented Oct 22, 2020 at 0:51
1

add a css class to the first lightning layout item and give it a height of 78px

4
  • Would that height be valid across all devices? Commented Apr 13, 2017 at 15:10
  • Yep would work. you can try the same using responsive testing in the browser. I used chrome to test it
    – RedDevil
    Commented Apr 13, 2017 at 17:20
  • Did try. Cannot accept it as best answer since the 78px will only be valid for layout:items with padding around-small. :/ Commented Apr 14, 2017 at 15:07
  • i will give you a solution which will work for both cases in sometime
    – RedDevil
    Commented Apr 15, 2017 at 14:11

You must log in to answer this question.

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