2

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>

On 21" screen : enter image description here

On 14" screen : enter image description here

Edit: code of girish: enter image description here

Improve this question
1
  • you have used pixel-based formatting hence the inconsistency, adding answer
    – GirishP
    Jun 13 '21 at 16:54
2

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 enter image description here

<aura:component implements="force:hasSObjectName,flexipage:availableForRecordHome,force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickActionWithoutHeader"
  access="global"
>
<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">
    <div class="slds-modal__container">
        <!-- Modal/Popup Box LWC header here -->
        <header class="slds-modal__header">
            <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
                <lightning:Icon iconname="utility:close"
                    alternativetext="close"
                    variant="inverse"
                    size="small" ></lightning:Icon>
                <span class="slds-assistive-text">Close</span>
            </button>
            <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Custom Popoup</h2>
        </header>
        <!-- Modal/Popup Box LWC body starts here -->
        <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
        </div>
        <!-- Modal/Popup Box LWC footer starts here -->
        <footer class="slds-modal__footer">
            <button class="slds-button slds-button_neutral" title="Cancel">Cancel</button>
            <button class="slds-button slds-button_brand" title="OK">OK</button>
        </footer>
    </div>
</section>
<!-- <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{ 
        min-width: 100% !important; 
        width:99% !important; 
        padding-top: 35px!important;
        padding-bottom: 35px!important;
        overflow-y: scroll!important;
    }
    
  </aura:html>
</aura:component>
Improve this answer
5
  • thanks for your answer, unfortunately that is not working. cf image in the question.
    – Raphael D
    Jun 14 '21 at 9:26
  • I think it is close to what is required. is the problem you are facing is the double scrolls? Are you sure you have used exact same code? did you check if you are not using any custom CSS in .css component?
    – GirishP
    Jun 14 '21 at 13:22
  • yes there is the double horizontal scrolls and the vertical scroll is also on the header and footer. I copy past your code in a new component.
    – Raphael D
    Jun 15 '21 at 6:22
  • do you mind adding here your latest changes? this just works fine for me. the scroll is coming on all places means something is not write in your other components which are conflicting with these changes. one possibility that your css in other quick action is targeting slds_modal and set as important hence overrdden
    – GirishP
    Jun 15 '21 at 8:52
  • Thanks for your help, I copy past the exact code that you sent without any change but still get the same modal, I even tried on an other environment without any other components. I not think it could be a conflict between CSS of an other component if it is not on the Lightning page.
    – Raphael D
    Jun 15 '21 at 9:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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