2

I'm using lightning:input-field in LWC, but I want only the input field, nothing else. I have hide the label using variant="label-hidden", but I automatically get the help-text near the field. And I don't want it in my component.

enter image description here

My code is :

<lightning-input-field field-name="AccountId" variant="label-hidden"></lightning-input-field>
2
  • Have you inspected the markup to verify that the help text is part of the lightning-input-field and not part of another element? Aug 22, 2019 at 13:28
  • Yup I checked and help text is part of lightning-input-field only Aug 22, 2019 at 14:10

4 Answers 4

4

Remove the help text from the field definition.

enter image description here

3
  • But that do not solve my purpose as ultimately I need a custom label for that standard field and I am using below code :- <label class="slds-form-element__label" style="margin-right: 0.5rem;">Account Name</label> <lightning-helptext class="customIcon" content={fieldsInfo.AccountId.inlineHelpText}></lightning-helptext> <lightning-input-field field-name="AccountId" variant="label-hidden"></lightning-input-field> and helptext will display nothing for lightning-helptext Aug 22, 2019 at 14:12
  • Try using <lightning-input type="text" name="textInput" label="Enter a Text" ></lightning-input>
    – Tamil
    Aug 22, 2019 at 18:03
  • 1
    Here I have a lookup field and as per the documentation lightning-input dont have any type=lookup. Aug 23, 2019 at 9:55
3

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 put the CSS that we wanted to apply 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.

3

My LWC Solution:

On your record edit form's onload, pass a method with below JS code included.

HTML:

<lightning-record-edit-form onload={handleLoad}>
      <lightning-input-field lwc-dom="manual" class="hideHelpText" field-name="my_field" variant="label-hidden"> </lightning-input-field>
</lightning-record-edit-form>

JS:

handleLoad()
{
    try 
    {
        const style = document.createElement('style');
        style.innerText = `c-my-class .slds-button__icon {
        display: none;
        }`;
        this.template.querySelector('.hideHelpText').appendChild(style);

    } catch (error) 
    {
        console.log(error);
    }

    this.myHideString = 'slds-show';
}

If you are displaying the record-edit-form in a modal like I am, and you are using a loading symbol or hiding your fields: make sure you hide your 'loading' fields by wrapping them in a div with the class="slds-hide" and "slds-show". This allows the form fields to load while being hidden so that template's query selector can grab them.

Notes:

  • 'my-class' is the name the class called 'myClass'. Must be preceded by c- in my case.

  • might not need [lwc-dom="manual"]

Two helpful documents:

https://www.vernica.net/2019/07/lwc-override-css-of-standard-lightning-components.html

Target inner elements of standard Lightning Web Components with CSS

2

You can make a style sheet as a static resource (needed for scoping issues; regular CSS sheet won't work), import it in your component, and attach a class to the div or whatever is wrapping your lightning-input-field. The class in the stylesheet needs to drill down in the component structure and manually hide the tooltip. I've have to do this for a few components. Since lightning web components aren't open source, you'll need to look the structure with inspector. Of course, realize that if salesforce changes the structure of the component in the future, your CSS override could stop working.

You must log in to answer this question.

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