Reduce space between Label and value LWC lightning-input

Question

I have the below lightning-input which I use to display some data in a component. But the when I apply the below code, I am seeing more space between label and value. Is there anyway to reduce the space between them?

        <div slot="body" class="slds-align_absolute-center slds-form_horizontal">
            <lightning-input type="text" label="Name:" value="ABC">
            </lightning-input>
        </div>

I tried to change the lightning-input to

            <lightning-input type="text" class="slds-size_1-of-2" label="Name:" value="ABC">
            </lightning-input>

But I don't see much difference with it.

NOTE: Even I tried to add a custom label by hiding the default label from lightning-input. That also maintain the same space between label and value.

Is there anyway to reduce the space between label and Input field without decreasing the input field size?

Answer 1

Based on what I can see in the inspector it seems that this is hard coded out of the box functionality coming from the css classes of your <div slot="body" class="slds-align_absolute-center slds-form_horizontal">.

CSS for the label

flex-basis: calc(33% - 1.25rem);

CSS for the div container of the input

padding-left: 33%;

That 33% padding is what is causing the issue and that is coming down from the class of the wrapping <div> that you have in place.

Solution

1. What you can do to avoid this headache is try to tweak the classes of the parent <div> which currently are class="slds-align_absolute-center slds-form_horizontal and see if you can achieve what you want using slds styling.

2. If that doesn't work you can try to omit the label of the <lightning-input> and instead put your own label in place.

I put a playground for you with a workaround that can resolve your problem. Check it out here.

HTML

<div class="wrapper">
    <span>Name</span>
    <div class="input-wrapper">
        <lightning-input type="text" label=" " value="ABC"></lightning-input>
    </div>
</div>

CSS

.wrapper {
    padding-left: 5px;
}
.wrapper > span {
    font-family: "Salesforce Sans",Arial,sans-serif;
    color: #3e3e3c;
    font-size: .75rem;
    padding-right: 10px;
}
.input-wrapper {
    display: inline-block;
    max-width: 50%;
    margin-bottom: .75rem;
}