web-dev-qa-db-fra.com

Comment positionner une boîte de dialogue au-dessus du bouton de déclenchement?

Je suis sur le point de mettre un coup de poing sur l'écran de mon PC. J'ai une boîte de dialogue qui refuse de bouger d'un pouce au-dessus de mon bouton de soumission en bas de l'écran - je le veux tout en haut.

J'ai vérifié que mon thème était en cours de chargement. Cela a été validé ici: ide loading of CSS

J'ai essayé:

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

J'ai essayé des nombres négatifs et positifs pour le top. Le mieux que j'obtiens est que je peux déplacer le modal plus bas afin que l'utilisateur doive faire défiler vers le bas pour le fermer. Cependant, ce meunier ne bougera pas un cheveu après le bouton de soumission

J'ai essayé de mettre une feuille de style dans le composant avec les éléments suivants:

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

Je n'arrive pas à faire bouger cette chose un pouce au-dessus de ce bouton de soumission. Je donnerai à quelqu'un mon premier enfant né s'ils m'aident à comprendre ce que je fais mal.

(oui je sais que je suis dramatique, mais je me suis battu avec et j'ai cherché sur le web pendant 3 heures; je suis un homme vaincu ...)

Modifier

voici le code thankYouModalComponent:

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>, ) {}
}

Voici la méthode d'appel et le constructeur du composant:

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

    }

Boîte de dialogue résultante en bas du formulaire

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

angularangular-material
24
Tom L'esperance

Vous pouvez ajuster la position du composant de boîte de dialogue à l'aide de la méthode updatePosition () de MdDialogRef. importer d'abord cette ligne dans votre composant de dialogue

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

dans le constructeur, utilisez cette

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

puis à partir du composant modal de dialogue à l'intérieur appeler cette méthode partout où vous voulez

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

en savoir plus à ce sujet ici https://material.angular.io/components/component/dialog

j'espère que cela vous aidera :)

20
Amit kumar

Une meilleure façon de procéder consiste à injecter l'élément bouton et à le passer dans la boîte de dialogue. De cette façon, la boîte de dialogue a le contexte complet sur la façon de la dimensionner/la positionner (et d'utiliser la fonction element.getBoundingClientRect()):

// 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);
  });
}
25
mwilson
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { name: this.name, animal: this.animal },
      position: {
        top: '0px',
        left: '0px'
      }
    });
4
Sehul Viras

Les styles de votre composant n'affecteront pas ses parents. Puisque le conteneur de dialogue est le parent de votre ThankYouComponent, il ne remplacera pas sa position.

Comme solution de contournement, vous pouvez ajouter le positionnement à votre styles.css Global.

⚠️ Attention cependant, cela affecte tous de vos dialogues! ⚠️

styles.css

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