How to recreate modal component for force:lightningQuickActionWithoutHeader ( Showing quick action same as Lightning Experience Standard modal )

If you are building a lightning component for a lightning-quick action then you must be having a hard time to add additional buttons to the footer. If you are implementing the force:lightningQuickActionWithoutHeader interface in the component then you can get rid of the default header and footer and can create your own footer with the buttons of your choice. But still, it doesn’t match with the Lightning Experienceince view. I had the same issue on a recent project and I was able to make it look like the default button’s pop-up.

In order to get the lightning experience matching modal, you need to make some tweaks in the CSS along with lightning design system CSS. You need to include some styles which will modify the standard style so you can get the same look and feel.

After Salesforce Spring ’18 release, Tag Not Allowed in Components. You can’t add a  tag in component markup or when you dynamically create a component in JavaScript code. This restriction ensures better component encapsulation and prevents component styling interfering with the styling of another component.

So,  In order to use a workaround, we will have to include a CSS in our lightning component using a static resource to modify the CSS of the container which is wrapping the lightning component.

    padding:0 !important;
    padding:0 !important;
    width:80% !important; // You can update the width as per your need
    max-width:80% !important;
    overflow-y:hidden !important;
    height:unset !important;
    max-height:unset !important;

Above provided CSS needs to be loaded as an external resource. You will need to copy and paste the CSS into a file and save it as a static resource. Make sure file extension is “.css”. For instance, assume we have uploaded it as a static resource and named it “quickActionStyle”.

Sample Component



Now, the quick action will look like below.


So, we are able to achieve what we were looking for with some small tweaks. If you have any question and concern then feel free to comment on the post.

You can also use the aura:html tag to inject this CSS in your lightning component.

Use the following CSS in aura:html tag as shown below.

Happy Easter!!