0

I have lightning component, which shows a dynamic message -4

Here is the component code--

                        <!-- Success Message Start -->
                    <div class="slds-region_narrow slds-is-relative slds-m-top_small">
                        <div class="slds-theme_success slds-notify slds-notify_toast">
                            <span class="slds-icon_container slds-m-right_small slds-no-flex slds-align-top">
                                <lightning:icon class="slds-icon_small" iconName="utility:success" alternativeText="Success!" size="small" variant="inverse"></lightning:icon>
                            </span>
                            <div class="slds-notify__content">
                                <!-- Keeping preformatted considering different formatting sent from different componennts-->
                                <h2 class="slds-text-heading_small"><p>{!v.successMessage}</p></h2>
                            </div>
                            <!--div class="slds-notify__close">
                                <lightning:buttonIcon class="slds-m-left_small" alternativeText="Close" iconClass="" variant="bare-inverse" type="button" iconName="utility:close" size="large" onclick="{! c.close}"></lightning:buttonIcon>
                            </div> -->
                        </div>              
                    </div>
                <!-- Success Message End -->

Problem is when I try to set v.succesMessage with a text like ABCD \n DEF , it is not taking the line breaks, it shows properly in console logs and alerts.

I tried to use <p> instead of <h2> but it didn't work.

What can be the problem? which the class getting wrong?

Thanks

2
  • can you try <br/> isntead for line breaks? Sep 18, 2019 at 19:52
  • no..the problem is that attribute is set from other components,basically when something completes I fire an event with the corresponding message, and it catches in this component. One of the component, I have requirement to show multiple lines,so I am setting \n in the event string attributes.
    – mvk1991
    Sep 18, 2019 at 19:56

1 Answer 1

1

You're going to want to use aura:unescapedHtml and format your message to use HTML tags rather than newline characters. Something along the following lines:

<!-- Success Message Start -->
    <div class="slds-region_narrow slds-is-relative slds-m-top_small">
        <div class="slds-theme_success slds-notify slds-notify_toast">
            <span class="slds-icon_container slds-m-right_small slds-no-flex slds-align-top">
                <lightning:icon class="slds-icon_small" iconName="utility:success" alternativeText="Success!" size="small" variant="inverse"></lightning:icon>
            </span>
            <div class="slds-notify__content">
                <!-- Keeping preformatted considering different formatting sent from different componennts-->
                <h2 class="slds-text-heading_small"><p><aura:unescapedHtml value="{!v.successMessage}"/></p></h2>
            </div>
            <!--div class="slds-notify__close">
                <lightning:buttonIcon class="slds-m-left_small" alternativeText="Close" iconClass="" variant="bare-inverse" type="button" iconName="utility:close" size="large" onclick="{! c.close}"></lightning:buttonIcon>
            </div> -->
        </div>              
    </div>
<!-- Success Message End -->

And successMessage should contain a string that looks like:

'This is a test<p>with a paragraph break.'

rather than

'This is a test\n with a newline.'
5
  • will it work for normal strings as well?
    – mvk1991
    Sep 19, 2019 at 5:41
  • If by normal strings you mean strings that don't have any HTML or special characters in them, yes. Sep 19, 2019 at 13:32
  • Worked.. thanks
    – mvk1991
    Sep 20, 2019 at 7:12
  • Even i am facing the problem I have used aura:unescapedHtml but the format is not looking good. I am getting the text from html email template (which has break tags) and displaying in lightning component. ![Output](i.stack.imgur.com/kBUfI.png)
    – m.dinesh
    Dec 17, 2021 at 9:55
  • @m.dinesh Do you mean it has \n or '<br/>`?
    – Matt Lacey
    Dec 17, 2021 at 12:07

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.