Adjust the width of input field type text in LWC

inputfieldjavascriptlightning-web-componentstext

<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

Best Answer

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.

Related Topic