0

Trying to make this work

<template>
    <p>This example creates a simple layout with field headers.</p>
    <lightning-layout vertical-align="end" class="slds-form">
        <lightning-layout-item padding="around-small" flexibility="auto">
            <lightning-input type="text" label="Test" placeholder="Enter text" variant="label-hidden" required>
            </lightning-input>
        </lightning-layout-item>
        <lightning-layout-item padding="around-small" flexibility="auto">
            <lightning-button variant="brand" title="Click to retrieve fields" label="Enter"></lightning-button>
        </lightning-layout-item>
    </lightning-layout>
</template>

It works fine when there are no error msges on the input element. But loses the alignment when validation msges show up. Is. there any way to dynamically add padding to button element so it matches the alignment with the input element.

enter image description here enter image description here

1
0

Removing vertical-align worked for me. Thanks to the comment from @YsrShk.

<template>
        <lightning-layout class="slds-form slds-size_3-of-3 ">
            <lightning-layout-item flexibility="auto" padding="around-small">
                 <lightning-input type="text" label="Test" placeholder="Enter text" variant="label-hidden" required>
                 </lightning-input>
            </lightning-layout-item>
            <lightning-layout-item padding="around-small">
                <lightning-button variant="brand" title="Click to retrieve fields" label="Enter"></lightning-button>
            </lightning-layout-item>
        </lightning-layout>
</template>

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.