angularjsmaterial-designangularjs-material

How to change style or add CSS in $mdDialog in AngularJs?


I have used the below code for showing a dialog, but I want to change the default style of the dialog.

Here's my code:

$scope.LocationRejectModal = function (msg) {
  var PersonName= msg.from.local;
  var confirm = $mdDialog.confirm()
    .title('Location')
    .textContent(PersonName+' has Rejected Location sharing Request.')
    .targetEvent(event)
    .ok('Ok')
  $mdDialog.show(confirm).then(function() {
      //some code
  }, function() {
      //some code   
    });
  };

How can this be done?


Solution

  • you can't apply custom style to predefined dialogs such as Alert and Confirm. If you have to use your custom css rules, you have to implement the Custom dialogs or a Pre-rendered dialog. In the first way the dialog content will be rendered only if it has to be, for example when you open the dialog itself. In the second way (using the pre-rendered dialog), the dialog's content will be rendered with the page. It will be hidden by default and you show it only when, for example, a button is pressed.

    In both of them you can easly apply custom css rules where you need them.

    In the documentation, you can find more information.