Lightning-helptext alignment (padding) issue.

Question

Hello everyone, I'm trying to use the lightning-helptext component but there is a padding inside that I can't remove it. That padding creates an alignment issue with my table head text.

I've already tried:

1. Adding SLDS classses to the <lightning-helptext>

2. Selecting slds-form-element__icon with CSS and setting the padding-top to 0px.

3. And some other similar options.

Any ideas?

I would like to align the text with the icon/button.

Lightning-helptext alignment (padding) issue.

https://developer.salesforce.com/docs/component-library/bundle/lightning-helptext/example

Alex McColm · Answer

Probably too late for yourself but for anyone else struggling with this (like I was) I have a solution.

As their CSS is in the shadow DOM you can't override it but the padding-top value is set with a styling hook which you can adjust with your CSS.

If you look at the .slds-form-element__icon css it uses;

padding-top: var(--lwc-spacingXxSmall,0.25rem);

You can set a value for --lwc-spacingXxSmall with your own css class

:host .paddingOverride {    --lwc-spacingXxSmall: 0px;}

and apply this to your lightning-helptext to remove that annoying top padding.

<lightning-helptext content={tooltip} class="paddingOverride"></lightning-helptext>

Lightning-helptext alignment (padding) issue.

Lightning Experience

相关学习

更多帮助