Removing e-flat class from buttons on confirmDialog

[Adam Toone]

Hi,

I have implemented a confirmDialog yet the buttons always render with class e-flat when i do not require them to be flat buttons. I can't find any way to stop this.Below is a sample of the code. Could you please advise?

dialogOjbt_u_ProcessConfirmationDialog = ej.popups.DialogUtility.confirm({

        title: 'Update',

       content: 'Are you sure you want to action all selected?',

        okButton: {cssClass: 'e-primary',  text: 'Yes' },

        cancelButton: {  text: 'No'},

       showCloseIcon: true,

       closeOnEscape: true,

       animationSettings: { effect: 'Fade' }

    });

and here is the html as rendered:

<div class="e-confirm-dialog e-control e-dialog e-lib e-dlg-modal e-popup e-popup-open" role="dialog" style="max-height: 949px; z-index: 1001; left: 0px; top: 0px; position: relative;" aria-labelledby="_title" aria-describedby="_dialog-content" aria-modal="true" tabindex="-1"><div class="e-dlg-header-content" id="_dialog-header"><button class="e-dlg-closeicon-btn e-control e-btn e-lib e-flat e-icon-btn" type="button" title="Close" aria-label="Close"><span class="e-btn-icon e-icon-dlg-close e-icons"></span></button><div class="e-dlg-header" id="_title">Update</div></div><div class="e-dlg-content" id="_dialog-content">Are you sure you want to action all?</div><div class="e-footer-content"><button type="button" class="e-control e-btn e-lib e-primary e-flat">Yes</button><button type="button" class="e-control e-btn e-lib e-flat">No</button></div></div>

[Revanth Krishnan]

Hi Adam, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “Need to remove the e-flat CSS from buttons on confirm Dialog”. 

 

This can be achieved by setting the ‘isFlat’ property to false by using the instance of the dialog. We have prepared a sample based on the shared code snippet for your reference, 

 

Code Snippet: 

 

document.getElementById("confirmBtn").onclick = function () { 

  var dialogObj = ej.popups.DialogUtility.confirm({ 

    title: " Confirmation Dialog", 

    content: "This is a Confirmation Dialog!", 

    okButton: { text: "OK", click: okClick }, 

    cancelButton: { text: "Cancel", click: cancelClick }, 

    showCloseIcon: true, 

    closeOnEscape: true, 

    animationSettings: { effect: "Zoom" } 

  }); 

  dialogObj.buttons[0].isFlat = false; 

  dialogObj.buttons[1].isFlat = false; 

}; 

 

Sample: https://stackblitz.com/edit/egprw9-pzx7rt?file=index.js 

 

Please check the above code snippet and the sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth