md 对话框操作在顶部而不是对话框底部

Question

按照他们网站上的自定义对话框示例进行操作，得到了不同的结果。我的 'actions' 行位于模式的顶部而不是底部 here

这是我使用的模板html

<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>

这是控制器

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);
  };
}

遵循他们网站上的示例，但是我的 'actions' 行位于对话框的顶部而不是底部。有css我失踪了吗？还是网站上的示例有问题？

Answer 1

我在使用较旧版本的 Angular Material（在我的例子中是 0.10.0）和较新版本的 angular（我这边是 1.5.7）时遇到了这个问题。

您可以尝试更新 Angular Material 或者如果您真的不想更新，您可以使用已弃用的 div 可能性：

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

而不是

<md-dialog-actions layout="row">

Answer 2

您可以通过添加一个新的 CSS class.

来轻松完成

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

像这样添加应用class -

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

Answer 3

我遇到了同样的问题，这里提出的解决方案对我没有用。

经过一些测试，我设法以这种方式解决了问题：

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

希望这对您有所帮助

md 对话框操作在顶部而不是对话框底部

md dialog actions are on top instead of bottom of dialog

angular-material