0
<template>
    <lightning-card
    title="Update Service Appointment Earliest Start Time"
    icon-name="utility:date_time"
    >
    <span>
        <div class="slds-grid">
            <div class="slds-col">
                <lightning-input type="datetime" class="earlyDateClass" name="earlDate" label="Earliest Start Date:" value={earliestDate} min={minDate} max={maxEndDate} onchange={handleDateChange} required></lightning-input>
            </div>
            <div class="slds-col">
                Service Appointment Due Date: {maxEndDate}
            </div>
            <div class="slds-col">
                <lightning-input type="text" label="Comments:"  placeholder="Enter message here for chatter post" value={comments} onchange={handleCommentChange}></lightning-input>
            </div>
        </div>   
    </span>
    <div class="slds-grid slds-docked-form-footer slds-m-right_large">
    <lightning-button
        class="slds-m-top_small"
        variant="brand"
        type="submit"
        name="save"
        label="Save"
        onclick={handleSave}
        disabled={disableButton}
    >
    </lightning-button>
    </div>
</lightning-card>
</template>

What I get is:

enter image description here

How do I make them appear in the same row? And little space from the border so that it is aligned a little right. How can this be achieved with grid. Any suggestions. What I am looking for is:

enter image description here

ANother approach I tried is:

<span><!--
    <div class="slds-grid">
        <div class="slds-col">
            <lightning-input type="datetime" class="earlyDateClass" name="earlDate" label="Earliest Start Date:" value={earliestDate} min={minDate} max={maxEndDate} onchange={handleDateChange} required></lightning-input>
        </div>
        <div class="slds-col">
            Service Appointment Due Date: {maxEndDate}
        </div>
        <div class="slds-col">
            <lightning-input type="text" label="Comments:"  placeholder="Enter message here for chatter post" value={comments} onchange={handleCommentChange}></lightning-input>
        </div>
    </div>
-->
Due Date : 
    <lightning-formatted-date-time label="Service Appointment Due Date:" value={maxEndDate} year="numeric" month="numeric" day="numeric" hour="2-digit"
                                    minute="2-digit"></lightning-formatted-date-time>
<lightning-layout multiple-rows>
    <lightning-layout-item size="4">
        <lightning-input type="datetime" class="earlyDateClass" name="earlDate" label="Earliest Start Date:" value={earliestDate} min={minDate} max={maxEndDate} onchange={handleDateChange} required></lightning-input>
    </lightning-layout-item>
    <lightning-layout-item size="8">
    </lightning-layout-item>
    <lightning-layout-item size="6">
        <lightning-input type="text" label="Comments:"  placeholder="Enter message here to post to chatter" value={comments} onchange={handleCommentChange}></lightning-input>
    </lightning-layout-item>
  </lightning-layout>
</span>

This gave me:

enter image description here

BUT, there is no space between the borders. Is there a way to add a little space and make this look more better? Is this the right approach? How can I make comments label bold , similar to the label of date&time field?

1 Answer 1

1

You have use the size of the grid as well as explained in the documentation. To add space use padding, as needed. To make the label bold, use the variant attribute to hide the label and create your own label for the component.

<template>
    <lightning-card title="Update Service Appointment Earliest Start Time" icon-name="utility:date_time">
        <div class="slds-p-left_medium slds-p-top_large">
            Service Appointment Due Date: 2022-09-01
        </div> 
        <div class="slds-grid slds-wrap slds-p-around_medium">           
            <div class="slds-col slds-size_2-of-6">
                <lightning-input type="datetime" class="" name="earlDate" label="Earliest Start Date:"
                    value={earliestDate} min={minDate} max={maxEndDate} onchange={handleDateChange} required>
                </lightning-input>
            </div>
            <div class="slds-col slds-size_4-of-6"></div>
            <div class="slds-col slds-size_1-of-2">
                <legend class="slds-form-element__legend slds-form-element__label">Comments:</legend>
                <lightning-input type="text" variant="label-hidden" placeholder="Enter message here for chatter post"
                    value={comments} onchange={handleCommentChange}></lightning-input>
            </div>
            <div class="slds-col slds-size_1-of-2"></div>
        </div>
    </lightning-card>
</template>

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.