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? Feb 9, 2019 at 19:47
  • @OleksandrBerehovskyi try lightning:notificationsLibrary
    – Ratan Paul
    Feb 10, 2019 at 17:52
  • I used that and it works as in original question :( should I wrap it with div or something ? Feb 10, 2019 at 18:07
  • @OleksandrBerehovskyi I think you used showToast function. I suggest try with showNotice function
    – Ratan Paul
    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. 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;}

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.