0
<div>
<lightning-input type="datetime" name="input5" label="Start Date:" value={earliestDate} min={minEndDate} max={maxEndDate} onchange={handleDateChange} required></lightning-input>
</div>
<div>
    <lightning-input type="text" label="Comments" value={comments} onchange={handleCommentChange}></lightning-input>
</div>

For the comments, I get a very long text field. How can I control the size of the field, can I shorten it? There is nothing in the specification that talks about the width - https://developer.salesforce.com/docs/component-library/bundle/lightning-input/specification

Want the width only as highlighted in the image below:

enter image description here

Any help is appreciated

2 Answers 2

2

Ordinarily, you'd use a grid to control the layout:

<lightning-layout multiple-rows>
  <lightning-layout-item size="4">
    <lightning-input type="datetime" name="input5" label="Start Date:" value={earliestDate} min={minEndDate} max={maxEndDate} onchange={handleDateChange} required></lightning-input>
  </lightning-layout-item>
  <lightning-layout-item size="8"><!-- skip to next row -->
  </lightning-layout-item>
  <lightning-layout-item size="4">
        <lightning-input type="text" label="Comments" value={comments} onchange={handleCommentChange}></lightning-input>
  </lightning-layout-item>
</lightning-layout>

That said, an overflow of the viewing area suggests that you have a parent element that's too wide; the default size of lightning-input is set to 100% of its parent component. You probably have other CSS or layout issues that will need to be fixed.

1
0

Add a css and resolved it:

.inputWidth{
    width: 450px;
}

You must log in to answer this question.

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