I have a lightning component that I open from Quick Action. I added some CSS to open the modal on full screen and this working. What I want to do is to stick the custom footer to the bottom of the component and have a scrollable body (between header and footer).
<aura:component
implements="force:hasSObjectName,flexipage:availableForRecordHome,force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickActionWithoutHeader"
access="global">
<div class="modal-header slds-modal__header slds-size_1-of-1">
<h2 class="slds-modal__title">custom quick action</h2>
</div>
<div style="height: 500px;">
body - The Height of this part can change
</div>
<div class="modal-footer slds-modal__footer slds-size_1-of-1 ">
<lightning:button aura:id="buttonCancel" variant="Neutral" class="slds-button" label="Cancel"
onclick="{!c.handleCancel}" />
<lightning:button aura:id="buttonSend" variant="Brand" class="slds-button" label="Save"
onclick="{!c.handleSave}" />
</div>
<aura:html tag="style">
.cuf-content {
padding: 0 0rem !important;
}
.slds-p-around--medium {
padding: 0rem !important;
}
.slds-modal__content {
overflow: initial !important;
height: 99% !important;
max-height: 99% !important;
}
.slds-modal__container{
max-width: 99% !important;
width:99% !important;
}
</aura:html>
</aura:component>
Best Answer
Working codebase using the CSS from SLDS. Try not to use custom divs and pixels based height/width will not work well in all screen types
A side note - You should start using LWC components instead of aura. Soon aura will be outdated in the Salesforce ecosystem. and LWC gels with existing builds where aura is used extensively