Mat-dialog over a specific div

user_11850453 0
Viewed 4707

I am working on angular 8 and using mat-dialog. Right now, the mat-dialog overlay is covering the entire page and mat-dialog is on the center of the page as shown below. enter image description here

But I want the mat-dialog over a div only and the overlay should also appear on a parent div only i.e. mat-dialog should be relative to a parent div as shown in the image below. How to do this? Also, it is a responsive web-page so, adding the position of mat-dialog and overlay is a lot of work and may not look good in different screens sizes. If it is not possible with angular material then please suggest some other framework (bootstrap, etc.) or other methods.

enter image description here.

bootstrap-4 angular-material angular
3 Answers

You can user the updatePosition function associated with the MatDialogRef

this.dialogRef.updatePosition({ top: '25px', left: '25px', right:'25px', bottom:'25px' });

This will position the dialog box.

user_67170280

You can create an div which is position: absolute and inside the host div.

Template:

<div class="main">
  <button (click)="toggleDialog()"> toggle dialog </button>
  <div *ngIf="isOpen" class="dialog"> 
    <span>Window dialog</span>
  </div>
</div>

CSS:

.main {
  position: relative;
  height: 100vh;
}

.dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 300px;
  height: 200px;
  background-color: grey;

  display: flex;
  flex-direction: column;
  align-items: center;
}

TS:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  isOpen = false;

  toggleDialog() {
    this.isOpen = !this.isOpen;
  }
}

Try it here: https://stackblitz.com/edit/angular-evpbay

user_101140380

Please remove the dialog overlay.

.cdk-overlay-backdrop{display: none;}

Create your own overlay when a popup is open.

user_115993910
Related