[SalesForce] Reduce space between Label and value LWC lightning-input

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>

enter image description here
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.

enter image description here

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?

Best Answer

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">.

enter image description here

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.

enter image description 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;
}
Related Topic