Lightning component modal window with fixed size and proper closing buttons

auracssforcemodalslds

I want to use a salesforce modal window using a lightning component, fixing its size to 90% width AND height of the screen to display larger content (a pdf preview). The standard modal component seems to provide only limited support for resizing.

Any help to properly use a modal screen element is highliy appreciated!

Details

Standard modal example

I created a lightning component *.cmp which is opened via a QuickAction Button in a Salesforce modal window on top of a record page of a custom object.

Using the the standard example for a large-modal I get a window only using the center 1/3 of the screen.

Standard large-modal example

Extra css for 90% width

Using some extra css …

<aura:html tag="style">
    .slds-modal__container {
        min-width: 90vw;  /* Stretch to 90% of viewing width (vw) */
    }
</aura:html>

…I can stretch the width of the window, but it will not render the window properly anymore

  • misplaced closing x
  • doubled closing x
  • underlying white div

Resized but with broken design

Aim and reference of managed package

My aim is to have

  • blurring in background fill full screen (actually there is already a darker blurring, overlayed by the even darker, partial blurring?)
  • Modal window cover 90% width AND height
  • Proper closing x available

I saw such a proper behaviour on a managed package, but I cannot reproduce it.
I also want to use a PDF preview, which is why I need the 90% height / width.
See image below

Reference from managed package

Current status

With my code below I manage to get close to it but still with

  • strange double-blurring, not 100% filling screen
  • Misplaces / double X-close buttons
  • only using fixed px-height for pdf viewing element, i.e. not responsive

enter image description here

Code reference for lightning component

Note: onclick actions not used here

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId">
    <aura:attribute name="recordId" type="String"/>
    
    <aura:html tag="style">
        .slds-modal__container {
            min-width: 90vw;    
        }
    </aura:html>
      
    <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_large" aria-labelledby="modal-heading-01" aria-modal="true">
        <div class="slds-modal__container">
            <div class="slds-modal__header">
                <h1 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Test 007</h1>
                <lightning:buttonIcon
                    iconName="utility:close"
                    onclick=""
                    alternativeText="close"
                    variant="bare-inverse"
                    class="slds-modal__close"/>
            </div>
            <div id="modal-content-id-1" class="slds-modal__content slds-p-around_medium">
                <iframe
                        src="{! 'https://<url-to-my-sf-org.com>/apex/<my-apex-class-for-pdf-rending>?Id='+v.recordId}"
                        width="100%"
                        height="600px"/>
            </div>
            <div class="slds-modal__footer">
                <button
                        class="slds-button slds-button_brand"
                        aria-label="Create and attach"
                        onclick="}">
                    Create</button>                
                <button
                        class="slds-button slds-button_neutral"
                        aria-label="Cancel"
                        onclick="">
                    Cancel</button>
            </div>
        </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open" role="presentation"></div>  

</aura:component>

Any idea how to achieve the desired behaviour?

Best Answer

Following the rule that you spend days searching for a solution, finally post a question to stackexchange, only to find the solution yourself the next day.

To fix the behaviour I added the following CSS

    .slds-modal__container {
        min-width: 90vw;  /* Increase width to 90% of viewing width (vw) */
        background-color: none; /* remove the dark-grey shading in background */
    }
    #modal-content-id-1 {
        /* 
        Increase height of content of modal container to
        maximum (uses 100 viewing height and substracts 225px,
        which is standard space around modal at max size
        */
        height: calc(100vh - 225px) 
    }

For calculating the height see also https://stackoverflow.com/questions/28791970/how-to-limit-the-height-of-the-modal

Related Topic