Remove this huge distance between label and input in LWC

csshtmllightning-web-componentslwc-domslds

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

Best Answer

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>
Related Topic