2

This question already has an answer here:

I have added lightning Modal (slds) component A in a another Lightning Component B. Lightning component B is used to create Lightning Tab.

Now when I show the modal, Position of Modal component A is restricted inside Parent component B. I would like to display modal above global Header (outside Component A) as in attached screenshot. CSS z-index is not much helpful, may be i am wrong. Please help to fix this position issue. Thanks for your time.`


Followed - Markup From SLDS Page (Summer ’17)

<div class="slds">
    <section role="dialog" tabindex="-1" aria-hidden="true" aria-labelledby="modal-content-id-2" aria-describedby="modal-content-id-2" class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <header class="slds-modal__header"></header>
        </div>
    <!-- Modal Content -->
    </section>
    <div class="slds-backdrop slds-backdrop_open"></div>
</div>

Portion of Modal hidden under Global Header Expected

marked as duplicate by Raul, Martin Lezer, battery.cord, glls, Oleksandr Berehovskyi Feb 21 '18 at 6:26

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.

  • Have you done all the necessary SLDS markup as shown here? lightningdesignsystem.com/components/modals I thought using slds-modal__container will automatically use the right z-index? – Christian Menzinger Jun 12 '17 at 19:32
  • @ChristianMenzinger Yes, I followed the same documentation. In fact the same markup is working as expected when I had this Modal component inside a lightning component which was in-turn added to Visual force page but Not to Lightning Tab. – Sriram Jun 12 '17 at 21:23
  • Added Markup to Question – Sriram Jun 12 '17 at 21:39
  • Style tag is not allowed in lightning components from ver42. Try Lightning component : overlayLibrary . There are still ways to add custom css using aura:unescapedHtml but not advisable. <aura:unescapedHtml value="{!v.cssStyle}"/> – Sriram Mar 16 '18 at 16:49
2

Was solved earlier. Issue in Lightning desing System modal component

Additional thing to take care is to revert change by applying css "as it was" while closing the modal.

Verified how it is being done (Salesforce Standard) to show New Object Record (Ex: Account) Modal. Header z-index has been made to 0 and .forceStyle.desktop .viewport class overflow to hidden.

Markup

<aura:attribute name="cssStyle" type="String" />
<style>{!v.cssStyle}</style>  
<!-- Style tag is considered as root element if this is the first line in Markup. Make sure you have this at the end (just before </aura:component>) if you have any js functions which works on root element css -->

Helper Js

applyCSS: function(component){
    component.set("v.cssStyle", ".forceStyle .viewport .oneHeader.slds-global-header_container {z-index:0} .forceStyle.desktop .viewport{overflow:hidden}");
},
revertCssChange: function(component){
    component.set("v.cssStyle", ".forceStyle .viewport .oneHeader.slds-global-header_container {z-index:5} .forceStyle.desktop .viewport{overflow:visible}");
}
  • 1
    when reverting (closing modal), it is better to nullify v.cssStyle attribute revertCssChange: function(component){ component.set("v.cssStyle", null); } – Sriram Nov 17 '17 at 2:00
  • It does not allow me to use <style> tag: Failed to save FilePreview.cmp: Markup for markup://cg:FilePreview may not contain a <style> tag: Source – efirat Mar 15 '18 at 10:47
  • @efirat Yes, Style tag is not allowed in lightning components from ver42. Try Lightning component : overlayLibrary . There are still ways to add custom css using aura:unescapedHtml but not advisable. <aura:unescapedHtml value="{!v.cssStyle}"/>. Try lightning component. – Sriram Mar 16 '18 at 16:47
  • I have added style tag by changing component api version to 41. Thanks.. – efirat Mar 19 '18 at 12:28

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