Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Angular Discussion :

Positionner une pop up angular material


Sujet :

Angular

  1. #1
    Membre actif
    Positionner une pop up angular material
    Bonjour, je développe une application angular. Je souhaite ouvrir une boîte de dialogue (une instance de MatDialog) lorsque je clique sur un bouton. Je le fais dans une méthode de ma page principale comme suit

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
     
        openDialog(event) {
          const element = document.getElementById(event.target.id);
          const jqelement = $(element);
          const position = jqelement.position(); // cache the position
          const bottom = position.top + jqelement.height();
          const dialogConfig = new MatDialogConfig();
          dialogConfig.disableClose = true;
          dialogConfig.autoFocus = true;
          dialogConfig.position = {
            top:  '' + bottom,
            right: '0'
          };
          dialogConfig.width = '50%' ;
          dialogConfig.height = '350px' ;
          console.log(dialogConfig);
          this.dialog.open(UserDialogComponent, dialogConfig);
        }


    Je veux qu'il soit positionné à droite et sous le bouton sur lequel je clique. Au début, j'ai mis top: 0px pour que la fenêtre contextuelle s'affiche dans le coin supérieur droit de la fenêtre. Il l'a bien fait. Après deux jours, j'ai essayé de le positionner juste en dessous du bouton (top: 52px), mais cela ne fonctionne pas, comme si la position précédente était conservée (pendant les deux premiers jours). Pouvez-vous m'aider

  2. #2
    Membre actif
    Bonjour, j'ai trouvé le bug. Il fallait tout simplement ajouter l'unité de mesure px

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
          dialogConfig.position = {
            top:  bottom + 'px',
            right: '0px'
          };

###raw>template_hook.ano_emploi###