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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.