Angular 2 Material How to update Dialog box Positi

Question

Below is the simple Angular 2 code that should show dialog box in the middle out of the box. Instead dialog box show at the bottom. I am using "angular-cli": "1.0.0-beta.24" and "@angular/material": "^2.0.0-beta.1"

Can anybody help why this is happening?

import { Component } from '@angular/core';
import {MdDialog,MdDialogRef,MdDialogConfig} from '@angular/material';

@Component({
  selector: 'app-root',
  template: `  
  <md-sidenav-container style="width:200px;height:500px;">
    <md-sidenav mode="side" opened="true" #sidenav>
      <md-nav-list>
             <a md-list-item (click)="newItem()">
               New
             </a>
             <a md-list-item>
               Refresh
             </a>
             <a md-list-item>
               Delete
             </a>
      </md-nav-list>                                  
    </md-sidenav>
  </md-sidenav-container>
  `,
})
export class AppComponent {
  title = 'app works!';
constructor(public dialog: MdDialog) {}

  newItem()
  {
    let dialogRef=this.dialog.open(RecordDialogComponent);
      dialogRef.afterClosed().subscribe(result => {
    });
  }
}


@Component({
  selector: 'record-dialog',
  template: `  <h1 md-dialog-title>New Item</h1>

  <md-dialog-actions>
    <button (click)="dialogRef.close('save')">Save</button>
    <button md-dialog-close>Cancel</button>
  </md-dialog-actions>
`
})

export class RecordDialogComponent{
  public title: string;
  public message: string;

  constructor(public dialogRef: MdDialogRef<RecordDialogComponent>) { }

}

Below is the package.json

{
  "name": "materialt2",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/material": "^2.0.0-beta.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.0.2",
    "typescript": "~2.0.3"
  }
}

Answer 1

Try this

const dialogRef = this.dialog.open(DialogComponentName, {
  width: '250px'
  position: { bottom: '0'}
});

You can also add left: 0 etc.

Answer 2

I had the same issue as you. This post helped me to solve it (although I think this isn't intended because it isn't described anywhere I looked): Angular2 Material: Md-Menu opens below router outlet

You need to include a theme from Angular Material as described here: https://github.com/angular/material2/blob/master/guides/theming.md

That fixed it for me.

Answer 3

You can change modal position using this code. Put this inside your md-dialog component.

import { MdDialog, MdDialogConfig, MdDialogRef } from '@angular/material';

constructor(public dialogRef: MdDialogRef<any>) { }

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

you can use updatePosition method anywhere inside dialog component.

for more information check this link https://material.angular.io/components/component/dialog