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

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.