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!


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) */

...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;    
    <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>
            <div id="modal-content-id-1" class="slds-modal__content slds-p-around_medium">
                        src="{! 'https://<url-to-my-sf-org.com>/apex/<my-apex-class-for-pdf-rending>?Id='+v.recordId}"
            <div class="slds-modal__footer">
                        class="slds-button slds-button_brand"
                        aria-label="Create and attach"
                        class="slds-button slds-button_neutral"
    <div class="slds-backdrop slds-backdrop_open" role="presentation"></div>  


Any idea how to achieve the desired behaviour?

1 Answer 1


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

You must log in to answer this question.

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