0

How to remove this huge distance between label and input in LWC. I didn't use custom styles, only from the salesforce lightning design system.

Here's my code from the HTML file:

<div>
        <template if:true={locatedOnTab}>
            <lightning-input type="text" name="Page number" label="Now page number" value={nowPageNumber} variant="label-inline" readonly></lightning-input>
            <lightning-button variant="brand" label="Previous" title="PreviousPageButton" onclick={handlePaginationClick} class="slds-m-left_x-small" disabled={previousButtonDisabled}></lightning-button>
            <!--I think this code is not important--!>
        </template>
    </div>

Here's what I get : Here's what I get

here's what I want to get (roughly) : here's what I want to get

1 Answer 1

1

You could use label-hidden variant, define your own div for the label and put both elements (label and lightning-input) in a flex box:

<template if:true={locatedOnTab}>
    <div class="slds-grid slds-grid_vertical-align-center">
        <div class="slds-form-element__label">Now page number</div>
        <lightning-input type="number" name="Page number" label="Now page number" value={nowPageNumber} variant="label-hidden" read-only></lightning-input>
    </div>
    <lightning-button variant="brand" label="Previous" title="PreviousPageButton" onclick={handlePaginationClick} class="slds-m-left_x-small" disabled={previousButtonDisabled}></lightning-button>
</template>

By the way, readonly is wrong, the right attribute is read-only. Specifications
I also changed the type of lightning-input to number.

However if you don't need a lightning-input, you could also change it to:

<template if:true={locatedOnTab}>
    <div>
        <span class="slds-form-element__label">Now page number</span> {nowPageNumber}
    </div>
    <lightning-button variant="brand" label="Previous" title="PreviousPageButton" onclick={handlePaginationClick} class="slds-m-left_x-small" disabled={previousButtonDisabled}></lightning-button>
</template>
1
  • I'm using the first option, thanks Jan 3, 2022 at 16:20

You must log in to answer this question.

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