Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

angular - How can I position a dialog above the triggering button?

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: ide loading of CSS

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

Resulting dialog box at the bottom of the form despite requesting is show at top

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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);
  }
}

Usage:

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);
  });
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...