4

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?

3

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

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

  • Would that height be valid across all devices? – Christian Szandor Knapp Apr 13 '17 at 15:10
  • Yep would work. you can try the same using responsive testing in the browser. I used chrome to test it – RedDevil Apr 13 '17 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. :/ – Christian Szandor Knapp Apr 14 '17 at 15:07
  • i will give you a solution which will work for both cases in sometime – RedDevil Apr 15 '17 at 14:11

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.