6

Followed the example on their website for a custom dialog and got a different outcome. My 'actions' row is at the top of the modal instead of the bottom as seen here

Here's the html for the template I used

<md-dialog aria-label="Mango (Fruit)"  ng-cloak>
  <form>
    <md-toolbar>
      <div class="md-toolbar-tools">
        <h2>Mango (Fruit)</h2>
        <span flex></span>
        <md-button class="md-icon-button" ng-click="cancel()">
          <md-icon md-svg-src="app/img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
        </md-button>
      </div>
    </md-toolbar>
    <md-dialog-content>
      <div class="md-dialog-content">
        <h2>Using .md-dialog-content class that sets the padding as the spec</h2>
        <p>
          The mango is a juicy stone fruit belonging to the genus Mangifera, consisting of numerous tropical fruiting trees, cultivated mostly for edible fruit. The majority of these species are found in nature as wild mangoes. They all belong to the flowering plant family Anacardiaceae. The mango is native to South and Southeast Asia, from where it has been distributed worldwide to become one of the most cultivated fruits in the tropics.
        </p>
        <img style="margin: auto; max-width: 100%;" alt="Lush mango tree" src="img/mangues.jpg">
        <p>
          The highest concentration of Mangifera genus is in the western part of Malesia (Sumatra, Java and Borneo) and in Burma and India. While other Mangifera species (e.g. horse mango, M. foetida) are also grown on a more localized basis, Mangifera indica&mdash;the "common mango" or "Indian mango"&mdash;is the only mango tree commonly cultivated in many tropical and subtropical regions.
        </p>
        <p>
          It originated in Indian subcontinent (present day India and Pakistan) and Burma. It is the national fruit of India, Pakistan, and the Philippines, and the national tree of Bangladesh. In several cultures, its fruit and leaves are ritually used as floral decorations at weddings, public celebrations, and religious ceremonies.
        </p>
      </div>
    </md-dialog-content>
    <md-dialog-actions layout="row">
      <md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" md-autofocus>
        More on Wikipedia
      </md-button>
      <span flex></span>
      <md-button ng-click="answer('not useful')">
       Not Useful
      </md-button>
      <md-button ng-click="answer('useful')" style="margin-right:20px;">
        Useful
      </md-button>
    </md-dialog-actions>
  </form>
</md-dialog>

Heres the controller

angular.module('dialogDemo1', ['ngMaterial'])
.controller('AppCtrl', function($scope, $mdDialog, $mdMedia) {
  $scope.status = '  ';
  $scope.customFullscreen = $mdMedia('xs') || $mdMedia('sm');
  $scope.showAlert = function(ev) {
    // Appending dialog to document.body to cover sidenav in docs app
    // Modal dialogs should fully cover application
    // to prevent interaction outside of dialog

  $scope.showAdvanced = function(ev) {
    var useFullScreen = ($mdMedia('sm') || $mdMedia('xs'))  && $scope.customFullscreen;
    $mdDialog.show({
      controller: DialogController,
      templateUrl: 'dialog1.tmpl.html',
      parent: angular.element(document.body),
      targetEvent: ev,
      clickOutsideToClose:true,
      fullscreen: useFullScreen
    })
    .then(function(answer) {
      $scope.status = 'You said the information was "' + answer + '".';
    }, function() {
      $scope.status = 'You cancelled the dialog.';
    });
    $scope.$watch(function() {
      return $mdMedia('xs') || $mdMedia('sm');
    }, function(wantsFullScreen) {
      $scope.customFullscreen = (wantsFullScreen === true);
    });
  };

function DialogController($scope, $mdDialog) {
  $scope.hide = function() {
    $mdDialog.hide();
  };
  $scope.cancel = function() {
    $mdDialog.cancel();
  };
  $scope.answer = function(answer) {
    $mdDialog.hide(answer);
  };
}

Followed the example on their site, however my 'actions' row is at the top of the dialog instead of the bottom. Is there css I'm missing? Or is there an issue with the example on the site?

1

3 Answers 3

6

I've had this problem when using an older version of Angular Material (in my case 0.10.0) with a more recent version of angular (1.5.7 on my side).

You could try to update Angular Material or if, you really don't want to update, you could use the deprecated div possibility:

<div class="md-actions" layout="row" layout-align="end center">

instead of

<md-dialog-actions layout="row">
2
  • Thanks, this makes a lot of sense but I couldn't find anything online about it.
    – ceckenrode
    Jul 25, 2016 at 13:08
  • 1
    @ceckenrode yeah that's why I ended up answering your question even though you probably found a workaround at this point, just to prevent someone from going through this trouble and having it the simplest solution documented somewhere. Jul 25, 2016 at 13:10
2

You can do easily by adding a new CSS class.

<style>
.bottom-fix {
position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
}
</style>

Add apply this class like this -

<md-dialog-actions align="end" layout="row" class="bottom-fix"> 
1

I've had the same problem, and the solutions here proposed didn't work for me.

After some test, i've managed to resolve the problem in this way:

<md-dialog>
    <div>
        <md-toolbar>
            ...
        </md-toolbar>
        <md-dialog-content>
            ...
        </md-dialog-content>
    </div>
    <div>
        <md-dialog-action>
            ...
        </md-dialog-action>
    </div>
</md-dialog>

Hope this can be helpful

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.