角度材料中MdDialog的位置问题

Question

我试图将注册表格打开为MdDialog。但是，它总是在最左边的角落创建，95％的内容从视口中隐藏。我尝试过几次重新创建每个组件，并用简单的p元素替换了注册组件。似乎没什么用。

带有打开对话框链接的组件：

import { MdDialog, MdDialogRef } from '@angular/material';
import { RegisterComponent } from './../register/register.component';
import { Component } from '@angular/core';

@Component({
    selector: 'app-sidenav',
    templateUrl: './sidenav.component.html',
    styleUrls: ['./sidenav.component.css']
})
export class SidenavComponent {

    constructor(private dialog: MdDialog) {
}

    openRegisterForm() {
        const regDialogRef = this.dialog.open(RegisterComponent);
        regDialogRef.afterClosed().subscribe(result => {
            console.log(result);
        });
    }

    openLoginForm() {

    }
}

RegistratonForm组件：

import { Component, Optional } from '@angular/core';
import {NgForm} from '@angular/forms';
import {MdDialogRef} from '@angular/material';
@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})

export class RegisterComponent {
  constructor(@Optional() public dialogRef: MdDialogRef<RegisterComponent>) { }
  onSubmit(form: NgForm) {
    console.log(form.value.email);
    form.resetForm();
  }
}

父组件的HTML是

<md-sidenav-container fullscreen>
    <md-sidenav #sidenav mode="side" class="app-sidenav">
        <md-list>
            <md-list-item>
                <a md-button>
                    <md-icon>home</md-icon>
                    <span>Home</span>
                    <span class="app-filler"></span>
                </a>
            </md-list-item>
            <md-list-item>
                <a md-button>
                    <md-icon>event</md-icon>
                    <span>Events</span>
                </a>
            </md-list-item>
            <md-list-item>
                <a md-button>
                    <md-icon>class</md-icon>
                    <span>Workshops</span>
                </a>
            </md-list-item>
            <md-list-item>
                <a md-button>
                    <md-icon>contacts</md-icon>
                    <span>Contacts</span>
                </a>
            </md-list-item>
        </md-list>
    </md-sidenav>
    <md-toolbar color="primary">
        <button class="app-icon-button" (click)="sidenav.toggle()">
            <md-icon>menu</md-icon>
        </button> Ozmenta 2K17
        <span class="app-filler"></span>
        <button md-mini-fab [mdMenuTriggerFor]="menu"><md-icon>add</md-icon></button>
    </md-toolbar>
    <md-menu #menu="mdMenu">
        <button md-menu-item (click)="openLoginForm()">
            <md-icon>account_circle</md-icon>
            <span>Login</span>
        </button>
        <button md-menu-item (click)="openRegisterForm()">
            <md-icon>account_circle</md-icon>
            <span>Register</span>
        </button>
    </md-menu>
</md-sidenav-container>