All geek questions in one place

Angular2 Material Dialog css dialog box size

Angular2 material team recently released MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md

I would like to change the look of the angular2 dialog box. For example, to change the fixed size of a pop-up container and make it scrollable, change the background color and so on. What is the best way to do this? Is there any css I can play with?

+20
source share
9 answers

You can check the dialog element with dev tools and see which classes are used in mdDialog.

For example, .md-dialog-container is the main class of MDDialog and is indented: 24px

You can create your own CSS to rewrite everything you want

 .md-dialog-container { background-color: #000; width: 250px; height: 250px }

In my opinion, this is not a good option and probably runs counter to the material guide, but since it does not have all the functions that were in the previous version, you should do what you consider best for yourself.

+10
source

The content in md-dialog-content automatically scrolls.

You can manually set the size by calling MdDialog.open

 let dialogRef = dialog.open(MyComponent, { height: '400px', width: '600px', });

Further documentation / examples of scrolling and sizes: https://material.angular.io/components/dialog/overview

Some colors should be determined by your theme. See here for thematic documents: https://material.angular.io/guide/theming

If you want to override colors and the like, use the Elmer technique by simply adding the appropriate CSS.

Note that you must have HTML 5 <!DOCTYPE html> on your page so that the size of the dialog box matches the content ( https://github.com/angular/material2/issues/2351 )

+33
source

There are two ways to resize the MatDialog component in the corner material.

.1) The external component that invokes the dialog component

 import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material'; dialogRef: MatDialogRef <any> ; constructor(public dialog: MatDialog) { } openDialog() { this.dialogRef = this.dialog.open(TestTemplateComponent, { height: '40%', width: '60%' }); this.dialogRef.afterClosed().subscribe(result => { this.dialogRef = null; }); }

2) Inside the dialog component. dynamically resize it

 import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material'; constructor(public dialogRef: MatDialogRef<any>) { } ngOnInit() { this.dialogRef.updateSize('80%', '80%'); }

use updateSize () in any function in the dialog component. it will automatically resize the dialog.

for more information check this link https://material.angular.io/components/component/dialog

+31
source

In the current version of Angular Material (6.4.7), you can use a custom class:

 let dialogRef = dialog.open(UserProfileComponent, { panelClass: 'my-class' });

Now put your class somewhere globally (I couldn't get it to work anywhere else), e.g. in styles.css :

 .my-class .mat-dialog-container{ height: 400px; width: 600px; border-radius: 10px; background: lightcyan; color: #039be5; }

Done!

+14
source

For the most recent version of Angular in this post, it seems that you should first create a MatDialogConfig object and pass it as the second dialog.open () parameter, because Typescript expects the second parameter to be of type MatDialogConfig.

 const matDialogConfig = new MatDialogConfig(); matDialogConfig.width = "600px"; matDialogConfig.height = "480px"; this.dialog.open(MyDialogComponent, matDialogConfig);
+4
source

I think you need to use /deep/ because your CSS may not see your modal class. For example, if you want to configure .modal-dialog

 /deep/.modal-dialog { width: 75% !important; }

But this code will change all your modal windows, the best solution would be

 :host { /deep/.modal-dialog { width: 75% !important; } }
+3
source

to share the last two ways to achieve this on the math dialog ... 1) either you set the width and height when opening, for example

 let dialogRef = dialog.open(NwasNtdSelectorComponent, { data: { title: "NWAS NTD" }, width: '600px', height: '600px', panelClass: 'epsSelectorPanel' });

or 2) use panelClass and style it accordingly.

1) the simplest, but 2) better and more customizable.

+2
source

This worked for me:

 dialogRef.updateSize("300px", "300px");
0
source

You can also allow the corner material to independently determine the size depending on the content. This means that you do not need to create TS cloud files with sizes that depend on your user interface. You can save them in HTML / CSS.

my-dialog.html

 <div class="myContent"> <h1 mat-dialog-title fxLayoutAlign="center">Your title</h1> <form [formGroup]="myForm" fxLayout="column"> <div mat-dialog-content> </div mat-dialog-content> </form> </div>

my-dialog.scss

 .myContent { width: 300px; height: 150px; }

My-component.ts

 const myInfo = {}; this.dialog.open(MyDialogComponent, { data: myInfo });
0
source

Source: https://habr.com/ru/post/1012313/

More articles:


All Articles