Установка пользовательского центра для диалога в Angular Материал

Question

Я пытаюсь исправить положение моего диалога в Angular. Я могу установить или обновить позицию, используя объект DialogRef или MatDialogConfig. Когда я установлю левую позицию на 25 пикселей, диалоговое окно появится в 25 пикселях слева. Когда я не указываю позицию, диалог всегда будет появляться в центре. К сожалению, я использую sidenav шириной 250 пикселей. Поэтому я бы хотел, чтобы мой диалог располагался в центре + 250 пикселей. Как мне подойти к этой проблеме?

const dialogConfig = new MatDialogConfig();
dialogConfig.autoFocus = true;
dialogConfig.disableClose = true;
const dialogRef = this.dialog.open(TCtor, dialogConfig);

dialogRef.updatePosition({ left: "25px" });

Answer 1

Вы можете использовать calc, встроенную функцию css, чтобы вычислить левую позицию вашего диалогового окна. Подробнее см. .

"Менее благородный" момент заключается в том, что вам нужно установить ширину диалогового окна и использовать его также в вычислениях calc.

Поэтому я бы хотел, чтобы мой диалог располагался по центру + 250px

2 возможных интерпретации:

1) Левая сторона диалогового окна должна быть в центре + 250px

• Середина экрана: 50vw (50% ширины области просмотра)

this.dialog.open(DemoDialogComponent, {
  height: '200px',
  width: '400px',
  position: {
    left: 'calc(50vw + 250px)'
  }
}); 

2) Диалог центрируется, но со смещением 250px при вправо

• Ширина диалогового окна: 400px
• Середина экрана: 50vw (50% ширины области просмотра)

this.dialog.open(DemoDialogComponent, {
  height: '200px',
  width: '400px',
  position: {
    left: 'calc(50vw - 200px + 250px)'
  }
});