Salesforce Developer Community

Chatter

Feed
0

Best Answers
0

Likes Received
1

Likes Given
0

Questions
2

Replies

lightning:inputRichText value losing HTML format when text is added.

Hello,

I'm building a dynamic HTML string in my helper class and assigning that string as value to lightning:inputRichText. When I add any text to lightning:inputRichText, the value which has the HTML tags is losing the tags.

Here is a sample dynamic HTML string before adding input text to lightning:inputRichText.

<HTML ><strong><u>Quick Note Details</u></strong><br/>Type of Meeting: General Update<br/>Date: Dec 2, 2019<br/><br/><strong><u>Total Commitments </u></strong><br/>Direct Commitments: $5,098m<br/><br/><strong><u>Opportunities Discussed</u></strong><br/><p><b>SCRF IV (Closed, 125m)</b></p><p>Consultant: Abbott Capital Management (Consultant-led)<ul><li>Summary<ul><li>02-Dec-2019-Test Summary</li></ul></li></ul><br/><br/><strong><u>Organization Overview</u></strong><br/><!--Overview--><br/><br/><strong><u>Organization Details</u></strong><br/><strong>AUM (MM) [USD]: </strong>$110,000<br/><strong>Coverage: </strong><!--Coverage--><br/><strong>Secondary Coverage: </strong>Secondary Coverage<br/><br/><strong><u>Direct Commitments</u></strong><table></table><br/></HTML>

Here is the lightning:inputRichText statement in the component

<lightning:inputRichText value="{!v.emailBody}" label="Body" aura:id="editor" />

Here is HTML value after adding blank space to the input

<p><b><u>Quick Note Details</u></b></p><p>Type of Meeting: General Update</p><p>Date: Dec 2, 2019</p><p><br></p><p><b><u>Total Commitments </u></b></p><p>Direct Commitments: $5,098m</p><p><br></p><p><b><u>Opportunities Discussed</u></b></p><p><b>SCRF IV (Closed, 125m)</b></p><p>Consultant: Abbott Capital Management (Consultant-led)</p><ul><li>Summary<ul><li>02-Dec-2019-Test Summary</li></ul></li></ul><p><br></p><p><br></p><p><b><u>Organization Overview</u></b></p><p><!--Overview-->.</p><p><br></p><p><b><u>Organization Details</u></b></p><p><b>AUM (MM) [USD]: </b>$110,000</p><p><b>Coverage: </b><!--Coverage--></p><p><b>Secondary Coverage: </b>Secondary Coverage</p><p><br></p><p><b><u>Direct Commitments</u></b></p><table></table><p><br></p>

How can I avoid the above from happening? I just want the value to retain the HTML tags and not lose the format.

Narsimha Rao
December 02, 2019
Like
1

5 replies

LWC lightning datatable: enabling popover overflow

I'm creating a lwc datatable with a custom column which contains a button and a corresponding popover.

The problem is that the popover will not display as I would like it to, though by playing around with different position styles I was able to get fairly close.

I set the container of the entire table cell to position:relative so that the button is positioned properly within the column, but the issue is when I try to determine the position value for the popover itself.

When I set it to position:fixed, the popover displays properly initially, but as I scroll through the page, as fixed sets the position relative to the viewport, the popover position doesn't change with the table but stays at the same position relative to the window. (SCREENSHOT A)
When I set the popover to position:absolute or position:relative, the popover will not will not display over the other rows (SCREENSHOT B) or it will display but expand the entire row, respectively. (SCREENSHOT C)

I would like to have the popover display over the rest of the table, as it does it position:fixed, but be positioned relative to the parent table, as with position:absolute or position:relative.

Here is the code for reference:
HTML

<template>

    <div style="text-align:left;" class="anchor slds-show">
        
        <!-- button -->
        <div class="slds-float_top" style="text-align:center;">
            <lightning-button-icon
                icon-name="utility:info_alt"
                onclick={openPop}    //these functions add/remove the slds-hide and slds-show classes from the popover
                onmouseover={hoverOpenPop}
                onmouseout={hoverClosePop}
            >
            </lightning-button-icon>    
        </div>
        <!-- end button -->
        
        <!-- popover -->
        <div class="slds-float_left popContainer slds-hide">
            <section class="slds-popover slds-nubbin_top-left slds-float_left slds-popover_large" role="dialog">
                //my code here
            </section>
        </div>
        <!-- end popover -->

CSS

:host .anchor {
    position: relative;
    display: block;
}
:host .popContainer {
    
}
:host .slds-popover {
    position: fixed;
}

Here are some screenshots of the scenarios described:
SCENARIO A
SCENARIO B
SCENARIO C

Please let me know if you need any clarification. Thanks!

Thomas Nguyen 22
September 10, 2019
Like
0

3 replies

lightning:inputRichText value losing HTML format when text is added.

<HTML ><strong><u>Quick Note Details</u></strong><br/>Type of Meeting: General Update<br/>Date: Dec 2, 2019<br/><br/><strong><u>Total Commitments </u></strong><br/>Direct Commitments: $5,098m<br/><br/><strong><u>Opportunities Discussed</u></strong><br/><p><b>SCRF IV (Closed, 125m)</b></p><p>Consultant: Abbott Capital Management (Consultant-led)<ul><li>Summary<ul><li>02-Dec-2019-Test Summary</li></ul></li></ul><br/><br/><strong><u>Organization Overview</u></strong><br/><!--Overview--><br/><br/><strong><u>Organization Details</u></strong><br/><strong>AUM (MM) [USD]: </strong>$110,000<br/><strong>Coverage: </strong><!--Coverage--><br/><strong>Secondary Coverage: </strong>Secondary Coverage<br/><br/><strong><u>Direct Commitments</u></strong><table></table><br/></HTML>

Here is the lightning:inputRichText statement in the component

<lightning:inputRichText value="{!v.emailBody}" label="Body" aura:id="editor" />

Here is HTML value after adding blank space to the input

<p><b><u>Quick Note Details</u></b></p><p>Type of Meeting: General Update</p><p>Date: Dec 2, 2019</p><p><br></p><p><b><u>Total Commitments </u></b></p><p>Direct Commitments: $5,098m</p><p><br></p><p><b><u>Opportunities Discussed</u></b></p><p><b>SCRF IV (Closed, 125m)</b></p><p>Consultant: Abbott Capital Management (Consultant-led)</p><ul><li>Summary<ul><li>02-Dec-2019-Test Summary</li></ul></li></ul><p><br></p><p><br></p><p><b><u>Organization Overview</u></b></p><p><!--Overview-->.</p><p><br></p><p><b><u>Organization Details</u></b></p><p><b>AUM (MM) [USD]: </b>$110,000</p><p><b>Coverage: </b><!--Coverage--></p><p><b>Secondary Coverage: </b>Secondary Coverage</p><p><br></p><p><b><u>Direct Commitments</u></b></p><table></table><p><br></p>

How can I avoid the above from happening? I just want the value to retain the HTML tags and not lose the format.

Narsimha Rao
December 02, 2019
Like
1