<< Salesforce Platform Cache | Home | Salesforce for Newcomers - Introduction to orgs, sandboxes, API login and Salesforce security >>

Lightning Components as Quick Actions in Salesforce1 and padding

Since Winter 17 we have had the option of using a Using Lightning Component as a Quick Action. In the Lightning Experience in a desktop browser the component is shown as a popup (actually a lightbox) in the UI and in Salesforce1 (the Salesforce mobile app) it's more of a modal fullscreen dialog. All this is great. Only thing you have to do is to make your component implement force:lightningQuickAction (all declaratively) and it can be added as a Quick Action. The resulting lightbox / dialog will have a header with the action name and a default Cancel button to close the dialog. Again great but what if you want to name the button something else? Or if you need a custom header? Well there is another interface for this called force:lightningQuickActionWithoutHeader. So far so good. The issue is that while this removes the default header and buttons it doesn't quite cut it in Salesforce1 as the container will still add a default margin around the component. Bummer...

The only way I found to fix this in the component I'm doing now is to add a negative martin on the component itself thereby hacking the UI. The added style is in bold - there is a negative margin to push the UI out of bounds to appear at 0,0 and a width and a height to make sure the header bar looks correctly. I've reported this internally and I hope someone will come up with a fix e.g. a new interface to add this explicitly.

<aura:component implements="force:hasRecordId,force:lightningQuickActionWithoutHeader">
    <div class="slds-modal__header" style="margin: -20px 0 0 -20px; width: 120%; height: 50px">
        <a href="javascript:void(0)" class="slds-float--left" title="back" onclick="{!c.close}">
            <c:svg svgPath="{!'/resource/SLDS221/assets/icons/utility-sprite/svg/symbols.svg#back'}" 
                   class="slds-icon-text-default" /><span class="slds-assistive-text">Back</span>
        <span class="slds-text-heading--small slds-float--left slds-p-left--x-small">Contact Sync</span>
        UI body...

Add a comment Send a TrackBack