Salesforce(세일즈포스) 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. 

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.

 

https://developer.salesforce.com/docs/component-library/overview/components

Components - Salesforce Lightning Component Library

 

 

HTML in Components

An HTML tag is treated as a first-class component by the framework. Each HTML tag is translated into an <aura:html> component, allowing it to enjoy the same rights and privileges as any other component.

For example, the framework automatically converts a standard HTML <div> tag to this component:

 

 

 

<aura:html tag="div" />

You can add HTML markup in components. Note that you must use strict XHTML. For example, use <br/> instead of <br>. You can also use HTML attributes and DOM events, such as onclick.

 

Warning

Some tags, like <applet> and <font>, aren’t supported.

Unescaping HTML

To output pre-formatted HTML, use aura:unescapedHTML. For example, this is useful if you want to display HTML that is generated on the server and add it to the DOM. You must escape any HTML if necessary or your app might be exposed to security vulnerabilities.

You can pass in values from an expression, such as in <aura:unescapedHtml value="{!v.note.body}"/>.

{!expression} is the framework's expression syntax. For more information, see Using Expressions.

• Supported HTML Tags
  The framework supports most HTML tags, including the majority of HTML5 tags.

See Also

• Supported HTML Tags
• CSS in Components