Large Modal

When we create lightning component and associate with button, it has configurable height but width is always half of the screen.

E.g. lightning component

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<!-- - Created by Chintan Shah on 10/20/2019. --> <aura:component description="DemoLargeModal" implements="force:lightningQuickActionWithoutHeader,force:hasRecordId"> <!--ltng:require styles="{!$Resource.largeModal}" /--> <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open slds-modal_large"> <div class="slds-modal__container"> <header class="slds-modal__header"> <lightning:buttonIcon iconName="utility:close" onclick="{! c.closeModel }" alternativeText="close" variant="bare" class="slds-modal__close"> </lightning:buttonIcon> <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate"> Header </h2> </header> <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1"> Content </div> </div> </section> </aura:component>

bound to button :

The height is configuration but width is not, and upon clicking the button, it would show narrow modal.

We can fix this by adding stylesheet to our lightning component. However it needs to be added using stylesheet.

Create CSS static resource:

1 2 3 4

.slds-modal__container{ max-width: 70rem !important; width:80% !important; }

Add the CSS in the lightning component:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<!-- - Created by Chintan Shah on 10/20/2019. --> <aura:component description="DemoLargeModal" implements="force:lightningQuickActionWithoutHeader,force:hasRecordId"> <ltng:require styles="{!$Resource.largeModal}" /> <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open slds-modal_large"> <div class="slds-modal__container"> <header class="slds-modal__header"> <lightning:buttonIcon iconName="utility:close" onclick="{! c.closeModel }" alternativeText="close" variant="bare" class="slds-modal__close"> </lightning:buttonIcon> <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate"> Header </h2> </header> <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1"> Content </div> </div> </section> </aura:component>

Now modal shows up wide:

Source code can be found at : https://github.com/springsoa/springsoa-salesforce