Angular 2 Material How to update Dialog box Position?

问题:

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"   } } 

回答1:

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.

回答2:

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

回答3:

Try this

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

You can also add left: 0 etc.

文章来源: Angular 2 Material How to update Dialog box Position?