Skip to main content
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:

Format Lightning Component Quick action with Custom header/footer

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>

 
5 respuestas
  1. 13 abr 2018, 18:59

    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>

     
0/9000