You need to sign in to do that
Don't have an account?
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:
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)
Component Code:
Current Output:
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)
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>
All Answers
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.
Cheers!