title: Angular material dialog isn't shown properly
body: <p>The dialog is shown on the bottom of my page with a strange look and behaviour! <a href="https://material.angular.io/components/dialog/overview" rel="nofollow noreferrer">Angular Material</a>
  Here are the versions am working with:</p>
  
  <p>@angular/material": "^2.0.0-beta.8,
   @angular/core": "^4.2.6"</p>
  
  <p>I'm using bootstrap v3.7.x ( i was trying to use ng-bootstrap modal and turns out it doesn't work with bootstrap 3 any longer)</p>
  
  <p><strong>my.component.html</strong></p>
  
  <pre><code> &lt;button md-button type="button" class="btn btn-primary" (click)="openMyModal()"&gt;OPEN&lt;/button&gt;
  </code></pre>
  
  <p><strong>my.component.ts:</strong></p>
  
  <pre><code>import {MdDialog} from '@angular/material';
  import {MyModal} from "./myModal.component"
  @Component({
    templateUrl: "./my.component.html"
  })
      export class My {
        constructor(public dialog: MdDialog) {}
  
      openMyModal():void {
          const modalInstance = this.dialog.open(MyModal);
        }
      }
  </code></pre>
  
  <p><strong>myModal.component.ts:</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import {MdDialog, MdDialogRef} from '@angular/material';
  
          @Component({
            template: `&lt;div class="modal-body"&gt;
                            Modal content Here
                            &lt;/div&gt;`
          })
          export class MyModal {
            constructor(
  
      public dialogRef: MdDialogRef&lt;MyModal&gt;) {}
      }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/pLCY2.png" rel="nofollow noreferrer">How the html of the modal is displayed on botton of my page</a></p>