3

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?

1 Answer 1

2

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;
}
2
  • 1
    This works perfectly with some css changes for me. Thanks @Arthlete
    – KSL
    Jul 14, 2020 at 19:54
  • Glad I could help. :)
    – Arthlete
    Jul 14, 2020 at 19:55

You must log in to answer this question.

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