How can I position a dialog above the triggering b

Question

I'm about to put a fist through my PC screen. I have a dialog box that refuses to budge a hot inch above my submit button at the bottom of the screen -- I want it at the very top.

I have made sure my theme is loading. That was validated here:

I have tried:

this.dialogBox.open(thankYouModal, {position: {top: '0%', left: '20%'}});

I've tried negative and positive numbers for top. The best I get is that I can shift the modal further down so the user has to scroll down to close it. However, that sucker won't budge a hair past the submit button

I've attempted to put a style sheet into the component with the following:

div#cdk-overlay-0.cdk-overlay-container{
    position: fixed !important;
    left: 20%;
    top: 0%;
    background-color: white;
    pointer-events: auto;
}

I cannot get this thing to budge an inch above that submit button. I will give someone my first born child if they help me figure out what I'm doing wrong.

(yes I know I'm dramatic, but I've fought with it and searched the web for 3 hours; I am a defeated man ... )

Edit

here is the thankYouModalComponent code:

import {Component} from "@angular/core";
import {MdDialogRef, MdDialogConfig} from "@angular/material";

@Component({
             selector: 'thank-you-modal',
             template: `
                                <h3>Thank You for Your Submission</h3>
                                <p>Your Feedback has been Saved.</p>
                                <button md-raised-button (click)="dialogRef.close()">Close</button>

                        `,
            styles: [`
                        .md-dialog-container {
                                            position: fixed !important;
                                            left: 20%;
                                            top: 0%;
                                            background-color: white;
                                            z-index: 100000;
                    }`]
})

export class ThankYouComponent{
    constructor(public dialogRef: MdDialogRef<any>, ) {}
}

Here's the calling method and constructor for the component:

constructor(@Inject(FormBuilder) fb : FormBuilder,
                 private feedbackService: feedbackService,
                 private dialog : MdDialog){

-------<irrelevant code here>------------

}



    submitFeedback(group : FormGroup){
            const feedback = new Feedback(  group.get('nameBox').value,
                                            group.get('productBox').value,
                                            group.get('upsBox').value,
                                            group.get('downsBox').value);

            if(confirm("Is the data entered what you want to submit?")){
                this.dialog.open(ThankYouComponent, {position: {top: '0%', left:'20%'}});

    }

Resulting dialog at bottom of form

Answer 1

const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { name: this.name, animal: this.animal },
      position: {
        top: '0px',
        left: '0px'
      }
    });

Answer 2

A better way to do this is to inject the button element and pass it into the dialog. This way, the dialog has the full context on how to size it up/position it (and leverage the element.getBoundingClientRect() function):

// Dialog Component

import { Component, ElementRef, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogConfig, MatDialogRef } from '@angular/material';

@Component({
  selector: 'app-dialog-component',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.scss']
})
export class MyDialogComponent implements OnInit {
  private readonly _matDialogRef: MatDialogRef<MyDialogComponent>;
  private readonly triggerElementRef: ElementRef;
  constructor(_matDialogRef: MatDialogRef<MyDialogComponent>,
              @Inject(MAT_DIALOG_DATA) data: { trigger: ElementRef }) {
    this._matDialogRef = _matDialogRef;
    this.triggerElementRef = data.trigger;
  }

  ngOnInit() {
    const matDialogConfig: MatDialogConfig = new MatDialogConfig();
    const rect = this.triggerElementRef.nativeElement.getBoundingClientRect();
    matDialogConfig.position = { left: `${rect.left}px`, top: `${rect.bottom - 50}px` };
    matDialogConfig.width = '300px';
    matDialogConfig.height = '400px';
    this._matDialogRef.updateSize(matDialogConfig.width, matDialogConfig.height);
    this._matDialogRef.updatePosition(matDialogConfig.position);
  }
  cancel(): void {
    this._matDialogRef.close(null);
  }
}


// Call the dialog

onShowDialog(evt: MouseEvent): void {
  const target = new ElementRef(evt.currentTarget);
  const dialogRef = this._matDialog.open(MyDialogComponent, {
    data: { trigger: target }
  });
  dialogRef.afterClosed().subscribe( _res => {
    console.log(_res);
  });
}

Answer 3

The styles from your component won't affect its parents. Since the dialog-container is the parent of your ThankYouComponent, it won't override its position.

As a workaround, you can add the positioning to your global styles.css. Caution though, this affects all of your dialogs!

styles.css

mat-dialog-container {
  position: fixed;
  left: 20%;
  top: 0%
  background-color: white;
  z-index: 100000;
}

Answer 4

You can adjust position of dialog component using updatePosition() method of MdDialogRef. first import this line in your dialog component

import { MdDialog, MdDialogConfig, MdDialogRef } from '@angular/material';

in constructor use this

constructor(public dialModalRef: MdDialogRef<any>) { }

then from inside dialog modal component call this method anywhere you want

 changePosition() {
        this.dialModalRef.updatePosition({ top: '50px', left: '50px' });
    }

read more about it here https://material.angular.io/components/component/dialog

i hope this will help :)