Hola, estoy creando un diálogo con angularMaterial2 para mecanografiado y puedo generar el diálogo, pero se espera que se cargue al final de la página, no sobre los otros elementos como este.

Este es mi .TS

 import { Component, OnInit, Input } from '@angular/core'; import {Sponsor} from '../entitys/sponsor' import {MdDialog, MdDialogRef} from '@angular/material'; @Component({ selector: '[sponsor-tile]', templateUrl: './sponsor-tile.component.html', styleUrls: ['./sponsor-tile.component.css'] }) export class SponsorTileComponent implements OnInit { @Input() sponsor: Sponsor; constructor(public dialog: MdDialog) {} ngOnInit() { console.log(this.sponsor); } descModal(): void{ let dialogRef = this.dialog.open(DialogSponsorTileComponent); dialogRef.afterClosed().subscribe(result => { console.log(result); }); } } @Component({ selector: 'dialog-sponsor-tile', templateUrl: './dialog-sponsor-tile.html' }) export class DialogSponsorTileComponent{ constructor(public dialogRef: MdDialogRef<DialogSponsorTileComponent>){} }

y mi HTML:

 <img src="{{sponsor.Logoogo}}" class="speaker-img"> <h3>{{sponsor.Name}}</h3> <p (click)="descModal()" >{{sponsor.Description}}</p> <ul class="speaker-social"> <li *ngIf="sponsor.Facebook !== null" ><a href="{{sponsor.Facebook}}"><span class="ti-facebook"></span></a></li> <li *ngIf="sponsor.Twitter !== null" ><a href="{{sponsor.Twitter}}"><span class="ti-twitter-alt"></span></a></li> <li *ngIf="sponsor.Linkedin !== null" ><a href="{{sponsor.Linkedin}}"><span class="ti-linkedin"></span></a></li> </ul>

Y el HTML del Diálogo:

 <h1 md-dialog-title>Dialog</h1> <div md-dialog-content>What would you like to do?</div> <div md-dialog-actions> <button md-button (click)="dialogRef.close('Option 1')">Option 1</button> <button md-button (click)="dialogRef.close('Option 2')">Option 2</button> </div>

Lo hice en base a los ejemplos de material.angular.io