+ Start a Discussion
Briana L.Briana L. 

Format Lightning Component Quick action with Custom header/footer

I have a lightning component which is going to be used for a Quick Action on a record page. I have implemented force:QuickActionWithoutHeader because I need to have custom "save" and "cancel" buttons. However, the modal that pops up for the quick action has a lot of excess white space, which makes the header and footer look out of place. How can I fix this?

Current Output:
User-added image


Desired Output:
(Actually I would even like the modal pop-up to be smaller so that the input fields do not have so much excess white space, but if I can get the header and footer to look right I will settle for that)
User-added image


Component Code:
<aura:component implements="force:lightningQuickActionWithoutHeader,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="FileUploadController">

    <div class="modal-header slds-modal__header slds-size_1-of-1">
        <h4 class="title slds-text-heading--medium" >Upload File</h4>
    </div>
        
        <!-- MODAL BODY / INPUT FORM -->    
    <div class="slds-modal__content slds-p-around--x-small slds-align_absolute-center slds-size_1-of-1 slds-is-relative" aura:id="modalbody" id="modalbody">
        <form class="slds-form--stacked">
            <!-- All the fields for the form input -->
       </form> 
  
    </div>   <!-- End of Modal Content -->  
        
        <!-- MODAL FOOTER -->
		<div class="modal-footer slds-modal__footer slds-size_1-of-1">
            <div class="forceChangeRecordTypeFooter">
                <ui:button class="slds-button slds-button_neutral" label="Cancel" press="{! c.cancel}" /> 
                <ui:button class="slds-button slds-button--brand"
                       label="Save" press="{!c.save}"/>
            </div>
        </div>
</aura:component>

 
Best Answer chosen by Briana L.
Briana L.Briana L.
I was able to resolve this issue by adding the following aura:html tag to the my component, NOT in the CSS style part of the bundle.
<aura:html tag="style">
        .cuf-content {
            padding: 0 0rem !important;
        }
        .slds-p-around--medium {
            padding: 0rem !important;
        }       
        .slds-modal__content{
            overflow-y:hidden !important;
            height:unset !important;
            max-height:unset !important;
        }
    </aura:html>

 

All Answers

Briana L.Briana L.
I was able to resolve this issue by adding the following aura:html tag to the my component, NOT in the CSS style part of the bundle.
<aura:html tag="style">
        .cuf-content {
            padding: 0 0rem !important;
        }
        .slds-p-around--medium {
            padding: 0rem !important;
        }       
        .slds-modal__content{
            overflow-y:hidden !important;
            height:unset !important;
            max-height:unset !important;
        }
    </aura:html>

 
This was selected as the best answer
kishan patel 32kishan patel 32
Hi Briana,
did you try to use "Docked-form-footer" class which will gives you better footer as you want.
<!-----MODAL FOOTER -->
<div class="slds-docked-form-footer">
  <button type="button" class="slds-button slds-button--neutral">Cancel</button>
  <button type="button" class="slds-button slds-button--brand">Save</button>
</div>

I have tried by creating header footer and gives me ouput as below. Might be solve your problem. Let me know if it works for you else we can find more on it.
User-added image
Briana L.Briana L.
Hi Kishan, I do not want to use "docked" because that will dock the footer to the bottom of the browser window, instead of within the quick action modal.
Alex SpearsAlex Spears
Hi Briana, this solution helped me a ton thank you for sharing! One small correction to anyone else who may be implementing this solution, "force:QuickActionWithoutHeader" is actually >> "force:lightningQuickActionWithoutHeader" 

Cheers!
chetan jangidchetan jangid
THANKS FOR THIS iF you want the best whatsappgroupnames (https://whatsappgroupnames.best/)and gmwishes (https://gmwishes.site/).site  freefiremod (https://freefiremod.best/).best or some shayariwala  (https://www.shayariwala.best/2019/12/funny-shayari-comedy-shayari-in-hindi.html)then you should go on these links.