1

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>

how the table looks now

3
  • 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 Mar 18, 2019 at 9:31
  • I added extra markup code. It is a lightning-record-edit-form
    – pilse3
    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! Mar 19, 2019 at 22:16

2 Answers 2

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)

0

Put your CSS inside rendered call back and try once:

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

You must log in to answer this question.

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