How to modify the style of a seeded lightning-quick action modal popup component

Scenario

I was trying to place a quick action button to display custom lightning component to show a PDF. The quick action popup is coming with a default header and footer. The footer has only one cancel action button but, we need to have 3 action buttons, to perform savePDF, emailPDF and cancel.
To achieve this I have created a custom header, body and footer using SLDS styling. But the content is displayed on the modal popup’s body, with some padding and margin. rtaImage

How to remove the extra padding and margin in the action popup from the component?

I tried multiple workarounds to achieve this.

  • Included the CSS style to remove the margin or padding in the .css part of the aura bundle of my component. But, it is not possible to change the parent popup’s style from the child component due to THIS keyword in CSS.
  • Included an external stylesheet into the component as a static resource (using ltng:require). It was working fine but the style will be applied to all the quick action popups in the application.
  • HTML style tag cannot be used inside a component as it throws an error on saving.

Solution

Lightning provides an aura:html tag to include the HTML elements. The lightning validator does not throw any error when the style tag comes with an aura:html component like below.

<aura:html tag="style">
.cuf-content {
            padding: 0 0rem !important;
        }
        .slds-p-around--medium {
            padding: 0rem !important;
        }       
        .slds-modal__content{
            height:unset !important;
            max-height:unset !important;
        }
</aura:html>

This snippet solves the padding and margin issue inside the quick action popup.Please refer the below link to get the details of the aura:html component and leave a comment if you have any doubts.

Don’t forget to share the post if you like it & bookmark the blog for
future references. 

Reference :

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_aura_html.htm

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_html.htm

Advertisements

2 thoughts on “How to modify the style of a seeded lightning-quick action modal popup component

  1. amaleshravi April 18, 2018 / 2:24 pm

    അടിപൊളി

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s