1

I'm using a lightning-input. The label of the input is a bit too long and appears on two lines. When I add a field-level-help, instead of putting it on the second line where there is plenty of space, it adds it on a third line. I was wondering if there was any way of aligning it properly with the label instead ? Because right now, it looks really bad.

Non Aligned helptext

As asked in the comment I have added the HTML, which is fairly simple and aligned with what is defined in the documentation.

<div class="input-fields-container">
    <lightning-input label={labels.newConnCapacityRequested} type="number" value={newConnCapacityRequested} field-level-help={labels.newConnCapacityRequestedHelpText} required>
    </lightning-input>
</div>
.input-fields-container {
  width: 286px;
  margin-bottom: 10px;
}
4
  • To get this straight, you want the text Complete this field to appear above the input box? May 27, 2021 at 16:12
  • @EmmanuelMaina no, I want the little 'i' to appear on the second line. Not on its own on a third line. May 27, 2021 at 22:13
  • could you please post your html piece of code you are using. May 28, 2021 at 11:00
  • @ShagunSharma I have added my HTML to the post Jun 1, 2021 at 6:38

2 Answers 2

1

So the solution I found was to separate the label using the label as defined in the lightning design system.

Here is my code

<label class="slds-form-element__label">
    <abbr class="slds-required" title="required">*</abbr>
    <span class="slds-m-right_x-small">{labels.newConnCapacityRequested}</span>
    <lightning-helptext content={labels.newConnCapacityRequestedHelpText}></lightning-helptext>
</label>
<lightning-input type="number" placeholder={labels.kwPlaceholder} value={newConnCapacityRequested} variant="label-hidden" required></lightning-input>

And here is the result with the old solution above, and the new one below.

enter image description here

0

I found a link that might help.

lwc lightning-input field-level-help styling

1
  • @EmmanuelMaina, thank you this helped me find a solution Jun 1, 2021 at 7:09

You must log in to answer this question.

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