title: matDialog doesn't open as dialog
body: <p>Instead of opening as a layover popup, it opens as a block on the bottom of the page left aligned.</p>
  
  <p>I searched for similar problems, found this <a href="https://stackoverflow.com/questions/41941481/angular2-mddialog-is-not-appearing-as-a-popup">angular2 MdDialog is not appearing as a popup</a> but also doesn't work.</p>
  
  <p>Made a clean page, maybe it was some of my other css that interfered, but nope.</p>
  
  <pre><code>    &lt;div&gt;
    &lt;h4 mat-dialog-title&gt;New consultant&lt;/h4&gt;
  &lt;/div&gt;
  &lt;mat-dialog-content&gt;
    &lt;div *ngIf="!allFieldsAreFilledIn()" class="alert alert-info"&gt;
      &lt;strong&gt;{{ getAddFeedback('emptyFields') }}&lt;/strong&gt;
    &lt;/div&gt;
    &lt;div ngbDropdown class="d-inline-block"&gt;
      &lt;button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle&gt;{{ currentNewConsultant.user ? currentNewConsultant.user.lastName + " " + currentNewConsultant.user.firstName : activeUsers[0].lastName
        + " " + activeUsers[0].firstName }}&lt;/button&gt;
      &lt;div ngbDropdownMenu aria-labelledby="dropdownBasic1"&gt;
        &lt;button class="dropdown-item" *ngFor="let user of activeUsers" (click)="updateNewConsultantProperty(user, 'user')"&gt;{{user.lastName + " " + user.firstName}}&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div ngbDropdown class="d-inline-block"&gt;
      &lt;button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle&gt;{{ currentNewConsultant.unitManager != null ? currentNewConsultant.unitManager.lastName + " " + currentNewConsultant.unitManager.firstName
        : unitManagers[0].lastName + " " + unitManagers[0].firstName }}&lt;/button&gt;
      &lt;div ngbDropdownMenu aria-labelledby="dropdownBasic1"&gt;
        &lt;button class="dropdown-item" *ngFor="let um of unitManagers" (click)="updateNewConsultantProperty(um, 'unitManager')"&gt;{{um.lastName + " " + um.firstName}}&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div ngbDropdown class="d-inline-block"&gt;
      &lt;button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle&gt; {{ currentNewConsultant.profile ? currentNewConsultant.profile.name : userRoles[0].name}}&lt;/button&gt;
      &lt;div ngbDropdownMenu aria-labelledby="dropdownBasic1"&gt;
        &lt;button class="dropdown-item" *ngFor="let profile of userRoles" (click)="updateNewConsultantProperty(profile, 'profile')"&gt;{{profile.name}}&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Selecting Internal --&gt;
    &lt;div class="crudElement"&gt;
      &lt;label class="crudLabel" style="padding-top: 7px;"&gt;Internal?:&lt;/label&gt;
      &lt;div class="btn-group crudEditElement" dropdown&gt;
        &lt;button type="button" class="btn green-button dropdown-margin-min-width" dropdownToggle&gt;
          {{ currentNewConsultant.internal ? 'Internal' : 'External' }}
          &lt;span class="caret"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;ul *dropdownMenu role="menu" aria-labelledby="single-button" class="dropdownItems dropdown-menu dropdown-margin-min-width"&gt;
          &lt;li role="menuitem" (click)="updateNewConsultantProperty('Internal', 'internal')"&gt;
            &lt;a class="dropdown-item"&gt;Internal&lt;/a&gt;
          &lt;/li&gt;
          &lt;li role="menuitem" (click)="updateNewConsultantProperty('External', 'internal')"&gt;
            &lt;a class="dropdown-item"&gt;External&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group"&gt;
      &lt;label for="hometown"&gt;Hometown:&lt;/label&gt;
      &lt;input type="text" class="form-control" name="hometown" [(ngModel)]="currentNewConsultant.hometown" required&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group"&gt;
      &lt;label for="skills"&gt;Skills:&lt;/label&gt;
      &lt;input type="text" class="form-control" name="skills" [(ngModel)]="currentNewConsultant.skills" required&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group"&gt;
      &lt;label for="comment"&gt;Comment:&lt;/label&gt;
      &lt;textarea class="form-control" name="comment" [(ngModel)]="currentNewConsultant.comment" required&gt;&lt;/textarea&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="individualCost"&gt;Individual Cost:&lt;/label&gt;
      &lt;input type="number" class="form-control" name="individualCost" step="0.5" [(ngModel)]="currentNewConsultant.individualCost"
        required&gt;
    &lt;/div&gt;
  
  
    &lt;!--ADDING / SAVING--&gt;
    &lt;div *ngIf="activeUsers &amp;&amp; allFieldsAreFilledIn()"&gt;
      &lt;button [ngStyle]="{'display' : (addConfirming ? 'none' : '')}" type="button" class="btn btn-success" (click)="save()"&gt;Add
      &lt;/button&gt;
      &lt;div [ngStyle]="{'display' : (addConfirming ? '' : 'none')}"&gt;
        &lt;div&gt;
          Are you certain you want to add the new Consultant {{ currentNewConsultant.user.lastName + ' ' + currentNewConsultant.user.firstName
          }}?
        &lt;/div&gt;
        &lt;button style="margin-right: 5px; margin-top: 10px;" type="submit" class="btn btn-danger " (click)="cancel()"&gt;
          &lt;span class="glyphicon glyphicon-remove" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;button style="margin-top: 10px;" type="button" class="btn btn-success" (click)="save()"&gt;
          &lt;span class="glyphicon glyphicon-check" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div *ngIf="!activeUsers" class="alert alert-danger text-center" style="margin-top: 20px;"&gt;
      &lt;strong&gt;{{ getAddFeedback() }}&lt;/strong&gt;
    &lt;/div&gt;
  &lt;/mat-dialog-content&gt;
  </code></pre>
  
  <p>Styles.scss</p>
  
  <pre><code>@import '~@angular/material/prebuilt-themes/purple-green.css';
  </code></pre>
  
  <p>Open the dialog</p>
  
  <pre><code>private openDialog(): void {
      let dialogRef = this.dialog.open(CreateConsultantModalComponent, {
      });
    }
  </code></pre>
  
  <p>dialog component</p>
  
  <pre><code>    import { Component, OnInit, Output } from '@angular/core';
  import { ConsultantService } from '../../../service/consultant.service';
  import { UnitService } from '../../../service/unit.service';
  import { ProfileService } from '../../../service/profile.service';
  import { UserService } from '../../../service/user.service';
  import { Consultant } from 'app/model/consultant.model';
  import { Unit } from '../../../model/unit.model';
  import { Profile } from 'app/model/profile.model';
  import { User } from 'app/model/user.model';
  
  
  @Component({
    selector: 'r-create-consultant-modal',
    templateUrl: './create-consultant-modal.component.html',
    styleUrls: ['./create-consultant-modal.component.scss'],
    providers: [ConsultantService, UnitService, ProfileService, UserService]
  })
  export class CreateConsultantModalComponent implements OnInit {
  
    public consultants: Consultant[] = [];
    public consultantsFilteredList: Consultant[] = [];
    public currentNewConsultant: Consultant = null;
  
    public units: Unit[] = [];
    public unitList: string[] = [];
    public userRoles: Profile[] = [];
    public unitManagers: User[] = [];
    public activeUsers: User[] = [];
  
  
    constructor(private consultantService: ConsultantService,
      private unitService: UnitService,
      private profileService: ProfileService,
      private userService: UserService) {
        this.getAllConsultants();
        this.getAllUnits();
        this.getAllRoles();
        this.getAllFreeAndActiveUsers();
        this.getAllUnitManagers();
        this.currentNewConsultant = new Consultant(null, null, null, null, null, true, 0, null, null, null, true, null);
        this.currentNewConsultant.unitManager = null;
       }
  
  
      ngOnInit() {
  
      }
  
      private getAddFeedback(emptyFields?: string): string {
        if (!emptyFields) {
          let message = "Can't add a Consultant without a ";
  
          if (!this.activeUsers) message += 'User';
  
          return message += '!';
        }
        return 'All fields are required!'
      }
  
      private updateNewConsultantProperty($event: any, property: string): void {
        switch (property) {
  
          case 'user':
          this.currentNewConsultant.user = $event;
            break;
          case 'internal':
          this.currentNewConsultant.internal = $event == 'Internal';
            break;
          case 'unitManager':
          this.currentNewConsultant.unitManager = $event;
            break;
          case 'profile':
          this.currentNewConsultant.profile = $event;
            break;
          default:
            console.log('NOT IMPLEMENTED for updateProperty on NEW Consultant');
        }
      }
  
      public cancel(){}
  
      private allFieldsAreFilledIn() {
        let c = this.currentNewConsultant;
        return c.user
          &amp;&amp; c.internal
          &amp;&amp; c.hometown
          &amp;&amp; c.skills
          &amp;&amp; c.comment
          &amp;&amp; c.individualCost;
      }
  
  
    public save() {
  
      if (this.activeUsers) {
          this.currentNewConsultant.profile = new Profile(this.userRoles[0].id, this.userRoles[0].name, this.userRoles[0].rate);
          this.currentNewConsultant.user = this.activeUsers[0];
      }
  
      if (this.unitManagers) {
        let max = this.activeUsers.length;
        while (--max) {
          if (this.activeUsers[max].role.toUpperCase() == 'UM') {
            let um = this.activeUsers[max];
            this.currentNewConsultant.unitManager = new User(um.id, um.unit, um.userActivityLogs, um.email, um.password,
               um.firstName, um.lastName, um.shortName, um.employeeNumber, um.role, um.active);
          }
        }
      }
  
    }
    private getAllConsultants() {
      this.consultantService.getConsultants().subscribe(
        consultantList =&gt; {
          consultantList.forEach(c =&gt; this.consultants.push(
            new Consultant(
              c.id, c.user,
              c.profile, c.proposition,
              c.availableFrom, c.internal, c.individualCost,
              c.hometown, c.skills, c.comment, c.active, c.plannings, c.unitManager)
            )
          );
        },
        error =&gt; {
          console.log("Failed to get consultants data. Error message: " + error.message);
        }
      );
    }
  
    private getAllUnits() {
      this.unitService.findAllUnits().subscribe(
        unitList =&gt; {
          let unitNames = ['All'];
          unitList.forEach(unit =&gt; unitNames.push(unit.name));
          this.unitList = unitNames;
          this.units = unitList;
        },
        error =&gt; {
          console.log("Failed to get units data. Error message: " + error.message);
        }
      );
    }
  
    private getAllRoles() {
      this.profileService.findAllProfiles().subscribe(roles =&gt; {
        this.userRoles = roles;
      })
    }
  
    private getAllUnitManagers() {
      this.userService.findAllUnitManagers().subscribe(ums =&gt; {
        this.unitManagers = ums;
      })
    }
  
    private getAllFreeAndActiveUsers() {
      // Should be done in the backend but lack of time :'(, my apologies
      this.userService.findAllActiveUsers().subscribe(users =&gt; {
        const amountOfConsultants = this.consultants.length;
        const amountOfUsers = users.length;
        for (let j = 0; j &lt; amountOfConsultants; j++) {
          for (let i = 0; i &lt; amountOfUsers; i++) {
            const user = users[i];
            if (user &amp;&amp; user.email === this.consultants[j].user.email &amp;&amp; user.role === 'Admin') {
              users[i] = null;
            }
          }
        }
  
        for (let k = 0; k &lt; amountOfUsers; k++) {
          const user = users[k];
          if (user) { this.activeUsers.push(user); }
        }
      })
    }
  
  
  
  }
  </code></pre>