Ошибка позиции с mdDialog в AngularJS

Я использую mdDialog в Angular Material в своем проекте, но двумя разными способами:

Способ 1:

  $mdDialog.show($mdDialog.confirm()
    .ok('Submit')
    .cancel('Cancel'));

Это использует диалоговое окно confirm по умолчанию, которое будет отображать диалоговое окно в середине браузера,

Он сгенерирует md-dialog-container как:

<div class="md-dialog-container ng-scope" tabindex="-1" style="top: 2186px; height: 471px;">

Способ 2:

  var template = '<md-dialog>'
    + '    <md-dialog-content>'
    + '    </md-dialog-content>'
    + '    <md-dialog-actions>'
    + '      </md-dialog-actions>'
    + '</md-dialog>';

  $mdDialog.show({
      template: template,
      parent: angular.element(document.body),
      disableParentScroll: false
  });

Он сгенерирует md-dialog-container как:

<div class="md-dialog-container ng-scope" tabindex="-1" style="top: 0px; height: 471px;">

Однако этот с top: 0px в md-dialog-container, который отображается вверху страницы, а не в середине браузера.

В чем разница между этими двумя, есть ли способ сделать Way 2 таким же стилем css, что и Way 1? Спасибо!

Демонстрация:

http://codepen.io/anon/pen/amEdYv?editors=1010#0

http://codepen.io/anon/pen/PGEkKE (при изменении материала Angular на более старый версия, например 0.7.1, будет отображаться корректно)


css angularjs angular-material mddialog
person Stephen    schedule 05.10.2016    source источник
comment
Я получаю одинаковые top для обоих диалогов - codepen.io/camden-kid /pen/ORzrPj?editors=1010#0   -  person camden_kid    schedule 05.10.2016
comment
Привет, @camden_kid, спасибо за ответ. Это мой codepen.io/anon/pen/PGEkKE. Если вы измените версию углового материала на 0.7.1, она отобразится правильно.   -  person Stephen    schedule 05.10.2016
comment
@camden_kid, если вы добавите больше контента и сделаете страницу прокручиваемой, вы увидите ошибку: codepen.io/anon/pen/amEdYv?editors=1010#0   -  person Stephen    schedule 05.10.2016

Ответы (1)


arrow_upward
-1
arrow_downward

Мне удалось достичь того же результата, добавив запись CSS для md-dialog:

md-dialog {
  height: auto;
  vertical-align: central;
  align-items: center;
}

Пример в codepen: http://codepen.io/ther/pen/YGYwBA

person ther    schedule 05.10.2016
comment
Спасибо за ваш ответ, но ваше решение неверно, посмотрите мою демонстрацию, а также используйте последнюю версию Angular Material (например, 1.0.9), ура. - person Stephen; 05.10.2016