3

I have read different posts that with winter 17 ,custom lightning components will have precedence for styling over app.css styling , however i am still facing issues where my modal hides behind the salesforce tab menu , however the modals that salesforce opens up -

for example when you go to case tab and click new case - salesforce is able to open the modal window way above background window for the reason that it is able to override css element deskop to override:hidden ,

but my modal isnt able to do so , i have used below ltng:require tag where SLDS222 is zip CSS given by LDS , and attached is the screenshot of issue i am facing , any ideas on how to override and get salesforce default modal window

   <ltng:require styles="/resource/SLDS222/assets/styles/salesforce-lightning-design-system-ltng.min.css" />

Issue i am having with App.css

Pic where salesforce is able to show modal with no issues and showing modal window on top of background screen

marked as duplicate by Eric, Mohith Shrivastava, Santanu Boral, martin, Raul May 8 '17 at 6:30

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • Can you try giving it a z-index: 9000 and try. This means if 2 elements occupy the same spot the one with higher z-index will be shown on top – RedDevil May 7 '17 at 6:39
  • @RedDevil i added the z-index:9000 in the component css and used that in the component but it did not help ....@Eric - even though its a duplicate, issue has not been solved and the workarounds never working – user2945545 May 7 '17 at 11:11
  • @user2945545 - I added a complete example that incorporates the information from the duplicate answer. Fell free to put it on your lightning page and test it out. – Eric May 7 '17 at 20:42
  • The addition of <style> tags wont go through security from upcoming component versions(42) onwards. As an alternative we can use aura:unescapedHTML tag. You can go through my answer on this question: salesforce.stackexchange.com/questions/167759/… – Sarang Feb 8 '18 at 13:07
4

Since it appears my answer on the duplicate may not have been "complete" enough to be implemented by others, below is a complete reproducible example and fix ahem hack Tested on Winter and Spring 17

Here is a working component you can use to test both with and without the fix:

Note the min-height: 70vh in the markup style is needed to make the modal large enough to simulate a lot of content..

Component

<aura:component description="LargePopup" implements="flexipage:availableForAllPageTypes">

    <lightning:button label="Open Modal No fix" onclick="{!c.showModal}" variant="neutral"/>
    <lightning:button label="Open Modal With fix" onclick="{!c.showModalWithFix}" variant="brand"/>

    <aura:attribute name="modalStyle" type="String"/>
    <style>
        {!v.modalStyle}
    </style>

    <div aura:id="the_modal" role="dialog" tabindex="-1" aria-labelledby="the_modal_header"
         class="slds-modal slds-modal--large">

        <div class="slds-modal__container">
            <div class="slds-modal__header">
                <button type="button" onclick="{!c.closeModal}"
                        class="slds-button slds-modal__close slds-button--icon-inverse" title="Close">
                    <span class="slds-icon_container slds-icon-utility-close">
                        <lightning:icon iconName="utility:close" size="x-small" variant="bare"/>
                    </span>
                    <span class="slds-assistive-text">Close</span>
                </button>
                <h2 aura:id="the_modal_header" class="slds-text-heading--medium">My Example</h2>
            </div>
            <div aura:id="the_container" class="slds-modal__content slds-p-around--small" style="position: relative; min-height:70vh;">
                My Text
            </div>
        </div>
    </div>
    <div aura:id="modal_backdrop" class="slds-backdrop"></div>


</aura:component>

Component Controller

({
    showModal: function(component,event,helper){
        var pcModal = component.find("the_modal");
        var pcModalBackDrop = component.find("modal_backdrop");

        $A.util.addClass(pcModal, "slds-fade-in-open");
        $A.util.addClass(pcModalBackDrop, "slds-backdrop--open");

    },
    showModalWithFix: function(component,event,helper){
        var pcModal = component.find("the_modal");
        var pcModalBackDrop = component.find("modal_backdrop");

        $A.util.addClass(pcModal, "slds-fade-in-open");
        $A.util.addClass(pcModalBackDrop, "slds-backdrop--open");

        component.set("v.modalStyle", ".forceStyle .viewport .oneHeader {z-index:0; } .slds-global-header_container {position: static;} .forceStyle.desktop .viewport{overflow:hidden}");

    },
    closeModal : function(component,event,helper){
        var pcModal = component.find("the_modal");
        var pcModalBackDrop = component.find("modal_backdrop");

        $A.util.removeClass(pcModal, "slds-fade-in-open");
        $A.util.removeClass(pcModalBackDrop, "slds-backdrop--open");

        document.body.setAttribute('style', 'overflow: visible;');
        component.set("v.modalStyle", "");

    }
})

Without Fix button clicked

Without Fix

With Fix button click

With Fix

  • thanks for taking your time out in solving this , I think placement of <style> tag was important , that was not enabling the modal to come out of SF tabs , i am glad it did work now, are there efforts from salesforce to address this without hacking stuff ? what precautions should i take care of , since i plan to release this into production – user2945545 May 7 '17 at 21:25
  • 1
    No idea if they even are aware of it and there is no good avenue to report it unless one pays for support. These days I live by the assumption that eventually SF will run into it and fix it (eventually). As for possible issues, I had to change the CSS for winter 17. It was different in summer 16 so I may change yes. – Eric May 7 '17 at 21:30
  • Thanks for <style> tag tip. I assumed that it was no longer supported, but it worked in my custom page template (implements="lightning:recordHomeTemplate"). – Lightning Evangelist Jun 14 '18 at 15:12
0

You've not included the code for your modal, making it difficult to fully diagnose the source of your problem. Since you use the tag "lightning component", there may be a reason for some of this behavior. A component cannot access or modify the DOM of the Browser Window that contains it. A tab contains the lightning page from which a component is called and therefore could be considered a part of the Window's DOM the component does not have access to.

That having been said, I think it's important to first point you (and anyone else who reads this) to the LDS Documentation for Modals. That's the link to the page for "base modals", there are others that follow. Note the following:

Large modals call for large amounts of content. The height follows the same behavior and styles of other modals. The width changes to 90% of the viewport, and uses a wider minimum width and no maximum width.


If the above link doesn't help you resolve your issue, perhaps some of the following approaches to working around these issues may be of use.

  • use Dynamic References to Static Resources Using $Resource. While this link is to the Visualforce Developer Guide and contains an example for finding the page theme, it would seem the same concept would apply to Lightning.

  • When your modal is called, you might want at the same time to execute code that finds the Id of the active tab, then either changes the z-index of the tab to be the same as all the other UI tabs in the browser or perhaps in some manner changes the tab's style class from it's normal class and executes an "onBlur" event (you'd need to execute an onFocus event when closing the Modal when you do this that reverses the style class change for onBlur).

  • If you're not getting the desired opacity change, have your component fill the window content using a black background layer directly below it that has an opacity of 5-10% (is 90-95% transparent) for any portion of the pop-up that isn't needed to display the content. This will give the perception of depth you're looking to achieve by "darkening" the content below the pop up.

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