+ Start a Discussion
Julien SalensonJulien Salenson 

Using lightning:inputField, I want to remove helptext

Hi,

I'm using lightning:inputField, but I want only the input field, nothing else.
I have hidde the label, but I automaticaly get the helptext near the field.
And I don't want it in my component.

My code is :
<lightning:inputField fieldName="myCustomField__c" variant="label-hidden" "/>

Any Idea ?
 
Best Answer chosen by Julien Salenson
Niraj Kr SinghNiraj Kr Singh
Hi Julien Salenson,

There are two way you can do this:
1. Go to the particular object's field ("myCustomField__c") in in your Org and remove the HelpText value given there. It go out from the Lightning page.

2. Or you inspect the particular help icon area on page and find the some unique class of help icon. And add in this way to your Lightnong STYLE:
    .THIS .slds-form-element{ /* Replace this class name "slds-form-element" by your finding. */
          display: none;
     }

Thanks
Niraj

All Answers

Rishav MajiRishav Maji

Hi Julien,

If the Help Text is displaying in your Lightning page then Help Text exists in the Custom Field.
If you edit the Custom Field in the object you are using and delete the HelpText, it will go away from the Lightning Page as well.

Best of Luck.

Niraj Kr SinghNiraj Kr Singh
Hi Julien Salenson,

There are two way you can do this:
1. Go to the particular object's field ("myCustomField__c") in in your Org and remove the HelpText value given there. It go out from the Lightning page.

2. Or you inspect the particular help icon area on page and find the some unique class of help icon. And add in this way to your Lightnong STYLE:
    .THIS .slds-form-element{ /* Replace this class name "slds-form-element" by your finding. */
          display: none;
     }

Thanks
Niraj
This was selected as the best answer
Julien SalensonJulien Salenson
Hi Niraj,

Great : It's working now !
I have made this style:
.THIS .slds-form-element__label{ 
    display: none;
}
.THIS .slds-button__icon{ 
    display: none;
}


Thank you for your help.
Ravina Chopra 6Ravina Chopra 6
Hi Julein,

This CSS is not working for me. I added this in the CSS file created inside the LWC folder. Did you makeany other change apart from the one mentioned above?
Arpit Gupta 68Arpit Gupta 68
I found 2 solutions to this.

LWC is enforcing the shadow DOM style scoping, so you can't currently style other Elements outside your shadow tree.
  • Workaround 1 :- As a workaround we can use the aura component to override the styling of LWC inner elements ( Aura components do not enforce strict CSS encapsulation so the CSS will come in action here). Inspect the particular help icon area on page and find some unique class of help icon. And add below styling to your Aura component CSS file (Note: This will NOT work in LWC CSS file as LWC enforce strict CSS encapsulation.) and then implement your LWC in that Aura component.
THIS .slds-form-element__icon {/* Replace this class name "slds-form-element__icon" by your finding. */ display: none !important; }
 Implement LWC (named as testDOM) in Aura :-
<aura:component implements="lightning:actionOverride"> <c:testDOM/> </aura:component> 
  • Workaround 2 :- We have one more workaround to this where we don't use Aura Component but is to put the CSS that we wanted applied to the inner shadow DOM of Salesforce Base Components in a static resource. Then we used the loadStyle method of lightning/platformResourceLoader module to load that css. The styles loaded this way do apply to the inner elements within Salesforce base components.