lightning-input-field [Lightning Web Components]

Question

I am currently trying to make a table where I use the lightning-record-edit-form. I am trying to make the helptext icon disappear (without deleting it on the field itself), without any luck.. Can someone help me on my quest to make it disappear?

Thank you in advance!

CODE SNIPPETS:

<style type="text/css">       

        .tg  {border-collapse:collapse;border-spacing:0;border-color:#999;}
        .tg td{font-family:Arial, sans-serif;font-size:11px;padding:4px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#999;color:#444;background-color:#FFFFFF;}
        .tg th{font-family:Arial, sans-serif;font-size:11px;font-weight:normal;padding:4px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#999;color:#fff;background-color:#26ADE4;}
        .tg .tg-7fle{font-weight:bold;background-color:#efefef;text-align:center;vertical-align:top}
        .tg .tg-yzt1{background-color:#efefef;vertical-align:top}
        .tg .tg-amwm{font-weight:bold;text-align:center;vertical-align:top}
        .tg .tg-yw4l{vertical-align:top;text-align:left}
        .tg .tg-yw42{vertical-align:top;text-align:center}
        .tg-yw42 .tg-9hbo{font-weight:bold;vertical-align:top}
<--- THIS IS THE CSS WHERE I TRIED TO MAKE THE HELPTEXT ICON DISAPEAR (without any luck)--->
        .tg-yw42 .slds-form-element__icon {display:none;}          
        @media screen and (max-width: 100%) {.tg {width: 100% !important;}.tg col {width: 100% !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;}}
    </style>

<lightning-card
    title="RecordEditFormDynamicContact"
    icon-name="standard:opportunity"
>
    <lightning-record-edit-form
        record-id={recordId}
        object-api-name={objectApiName}
        >

    <lightning-messages>
        </lightning-messages>

        <table class="tg">
                <colgroup>
                    <col style="width: 30%"/>
                    <col style="width: 15%"/>
                    <col style="width: 10%"/>
                    <col style="width: 30%"/>
                    <col style="width: 15%"/>
                    </colgroup>
        <tr>
                <th class="tg-amwm" colspan="5">IBI investment plan</th>
              </tr>
              <tr>
                <td class="tg-7fle">NEEDS</td>
                <td class="tg-7fle">Cost/month (EUR)</td>
                <td class="tg-7fle"></td>
                <td class="tg-7fle">Resources</td>
                <td class="tg-7fle">Cost/month (EUR)</td>
              </tr>
              <tr>
                    <td class="tg-yw4l">Investment - Transport</td>
<--THIS IS THE ROW WHERE I GET THE HELPTEXT ICON -->
                    <td class="tg-yw42"><lightning-input-field field-name="Investment_Transport_car_van__c" variant="label-hidden"></lightning-input-field></td>
                    <td class="tg-yw4l"></td>
                    <td class="tg-yw4l">Resource - Own resources</td>
                    <td class="tg-yw42"><lightning-input-field  field-name="Resource_Own_resources__c" variant="label-hidden"></lightning-input-field></td>
                  </tr>

can you add more markup code? is it under some special div? Is it recordViewForm or edit? I tried with label-hidden it didnt show me the help text. gist.github.com/pranayjswl007/8a7da574db19a9d587220dba5206ba35 — Pranay Jaiswal
– Pranay Jaiswal, Commented Mar 18, 2019 at 9:31
I added extra markup code. It is a lightning-record-edit-form — pilse3
– pilse3, Commented Mar 18, 2019 at 9:41
I did a workaround, inspect the helptext icon, get the necessary css which is rendering it. Overide this css through an external css file in static resources. Load this external css in renderedCallback through loadStyle in your respective js. It will work! — Anshul Agrawal
– Anshul Agrawal, Commented Mar 19, 2019 at 22:16

Paul N · Accepted Answer · 2020-02-04 21:29:25Z

0

Try using

$('lightning-helptext').style.display = 'none';

within an external js file, loading within renderedCallback function through loadScript as described in this documentation: https://developer.salesforce.com/docs/component-library/documentation/lwc/create_third_party_library

(if this works, it would hide ALL help text icons on the page, including any others not on your web component, so use with care)

edited Feb 4, 2020 at 21:29

answered Feb 4, 2020 at 21:18

Paul N

1,1352 gold badges12 silver badges25 bronze badges

Add a comment |

vivekvismayam · Accepted Answer · 2023-08-07 13:41:37Z

0

Put your CSS inside rendered call back and try once:

renderedCallback(){ this.template.querySelector('.slds-form-element__icon').cssText+='display:none';

answered Aug 7, 2023 at 13:41

vivekvismayam

1918 bronze badges

Add a comment |

Stack Exchange Network

lightning-input-field [Lightning Web Components]

2 Answers 2

You must log in to answer this question.

Hot Network Questions

lightning-input-field [Lightning Web Components]

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions