Angular 2 Material How to update Dialog box Position? - angular2-material

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