function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Leticia Monteiro Freitas 4Leticia Monteiro Freitas 4 

Close Button Lightning Component

Hello, 

I've created a modal using showCustomModal, and I want chage the size of close button. 
Can anyone help me ?

User-added image
Raj VakatiRaj Vakati
Call this method $A.get("e.force:closeQuickAction").fire() will close the modal dialog. 

  
({
    cancelBtn : function(component, event, helper) {
        // Close the action panel
        var dismissActionPanel = $A.get("e.force:closeQuickAction");
        dismissActionPanel.fire();
    },
    saveAndCloseBtn : function(component, event, helper) {
        // Display the total in a "toast" status message
        var resultsToast = $A.get("e.force:showToast");
        resultsToast.setParams({
            "title": "Save Success!",
            "message": "A test save success toast!"
        });
        resultsToast.fire();
        // Close the action panel
        var dismissActionPanel = $A.get("e.force:closeQuickAction");
        dismissActionPanel.fire();
    }
})

 
Leticia Monteiro Freitas 4Leticia Monteiro Freitas 4
Raj, I need change the size of icon close button. 
Raj VakatiRaj Vakati
My bad ... GIve me your code markup 
Santosh Reddy MaddhuriSantosh Reddy Maddhuri
HI Leticia ,

Use  "slds-button__icon_large/slds-button__icon_medium/slds-button__icon_small" inside class of the button.

Hope this helps!
Raj VakatiRaj Vakati
You can set the CSS 
https://salesforce.stackexchange.com/questions/167114/set-width-of-modal-window-of-lightning-action
https://developer.salesforce.com/forums/?id=9060G000000BfHPQA0
  
.slds-modal__container{
    max-width: 70rem !important;
    width:80% !important;
}

Or create custom close button alos like below  
<div style="width:200px;"> //This makes the max width of everything inside 200px.
  <div class="slds-grid slds-grid_pull-padded-medium">
    <div class="slds-col slds-p-horizontal_medium">
        <lightning:layout horizontalAlign="spread" pullToBoundary="small">
            <lightning:layoutItem flexibility="grow">

                <lightning:button variant="neutral" label="TEST" iconName="utility:up" iconPosition="right"/>

            </lightning:layoutItem>
        </lightning:layout>
    </div>
  </div>
</div>


 
Leticia Monteiro Freitas 4Leticia Monteiro Freitas 4
Hi Guys, there is my code. 
How I can set the size of close button here. 
modalBody = content;
                component.find('overlayLib').showCustomModal({
                    body: modalBody, 
                    showCloseButton: true,
                    cssClass: "mymodal slds-modal_medium",
                    closeCallback: function() {
                        
                    }

 
Raj VakatiRaj Vakati
try like this
  
modalBody = content;
                component.find('overlayLib').showCustomModal({
                    body: modalBody, 
                    showCloseButton: true,
                    cssClass: "mymodal slds-modal_medium slds-modal__container",
                    closeCallback: function() {
                        
                    }

 
Leticia Monteiro Freitas 4Leticia Monteiro Freitas 4
Raj, I cant use tags like <b> inside my controller.
Raj VakatiRaj Vakati
I highlight that line ..

Use this code
  
modalBody = content;
                component.find('overlayLib').showCustomModal({
                    body: modalBody, 
                    showCloseButton: true,
         cssClass: "mymodal slds-modal_medium slds-modal__container", 
                    closeCallback: function() {
                        
                    }

 
Leticia Monteiro Freitas 4Leticia Monteiro Freitas 4
Raj, still doesent work.

I need change the size of this button:

User-added image