CODEWITHSUNDEEP
angulartypescriptdialogmodal-dialogangular-material
user9431457
user9431457

Reputation:

How to move a dialog " correctly " angular

I think i am not moving my pop-up correctly as you can see on the picture.

Two dialog instead of one

How to handle this in angular?

EDIT : if you take a look closer to the picture i sent, there are one pop-up in the center, and there are one too at the bottom (in red). And i woud like that the one at the bottom disappears.

To display the pop-up, i am using this code : https://material.angular.io/components/dialog/examples

The only difference is the css : my css

Upvotes: 0

Views: 601

Answers (2)

Powkachu
Powkachu

Reputation: 2268

It seems like you didn't include a theme to your project.

Are you using angular-cli?

If you are, put @import "~@angular/material/prebuilt-themes/indigo-pink.css"; in style.css.

If not, put <link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet"> in index.html.

Then don't forget to remove your custom CSS!

Check step 4 here: material.angular.io/guide/getting-started

Upvotes: 3

Swoox
Swoox

Reputation: 3740

This example can maybe help you first one:

this.dialog = this.dialog.open(Dialog1, {
            width: '100px',
            height: '1000px'
        });
        this.dialog.updatePosition({ top: '20px', left: '20px' });
this.dialog.afterClosed().subscribe((result: any) => {
  this.dialog2.close();
})

Second one 130 pixel to the left:

this.dialog2 = this.dialog2.open(Dialog2, {
            width: '100px',
            height: '1000px'
        });
        this.dialog2.updatePosition({ top: '20px', left: '130px' });

Upvotes: 1

Related Questions