I have created lightning quick action to add my component for some functionality.

so from my quick action. When I do some validation like

    var opp = component.get("v.objOpportunity");
    if(!opp.Name.length || !opp.CloseDate.length )
        var toastEvent = $A.get("e.force:showToast");
            "message": 'Opportunity name and close date can not be empty.',
            "type": "Error"

So the toast message display behind the modal. Please check below screenshot.

Any solution for this issue? I don't want to write custom error message functionality to display to user.

enter image description here

  • hey guys, still no simple workaround except creating custom toast component? Commented Feb 9, 2019 at 19:47
  • @OleksandrBerehovskyi try lightning:notificationsLibrary
    – Ratan Paul
    Commented Feb 10, 2019 at 17:52
  • I used that and it works as in original question :( should I wrap it with div or something ? Commented Feb 10, 2019 at 18:07
  • @OleksandrBerehovskyi I think you used showToast function. I suggest try with showNotice function
    – Ratan Paul
    Commented Feb 11, 2019 at 16:01
  • yes, notice works fine.. but from point of view of user experience it is not convenient to show success messages like that :( notice relates to prompts in SLDS. Doc says Prompt notice grabs the user’s attention & alerts them of system-related issues/updates. Commented Feb 12, 2019 at 9:06

5 Answers 5


Not an immediate answer, but the long term solution would be to indicate the known issue affects you Lightning Component force:showToast event displays toast message behind action window in Lightning Experience and Salesforce1


You can use the lightning:notificationsLibrary and put a notice up over your modal. It's not the same as a toast, but might work in some cases.


I think your issue is similar to this. Known Issue


I created a simple custom ToastError component to get around this limitation.


<c:ToastError visible="{!v.showError}" contents="{!v.errorMessage}" />




    <aura:attribute name="visible" type="Boolean" default="false" />
    <aura:attribute name="contents" type="String" />

    <aura:if isTrue="{!v.visible}">

        <div class="slds-notify_container slds-is-relative slds-m-bottom_small">
            <div class="slds-notify slds-notify_toast slds-theme_error" role="status">
                <span class="slds-icon_container slds-icon-utility-error slds-m-right_small slds-no-flex slds-align-top">
                    <lightning:icon iconName="utility:error" size="small" variant="inverse" />
                <div class="slds-notify__content">
                    <h2 class="slds-text-heading_small">
                <div class="slds-notify__close">
                    <lightning:buttonIcon iconName="utility:close" onclick="{! c.handleCloseClick }" size="small"
                        variant="bare-inverse" />




    handleCloseClick: function (cmp, event, helper) {
        cmp.set("v.visible", false);

Use this style element in you component, It worked for me

<aura:html tag="style">
    .toastContainer {position : fixed !important;}

You must log in to answer this question.

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