Angular2 Material Dialog css dialog size

Question

Angular2 material team recently released the MDDialog https   github com angular material2 blob master src lib dialog README md  I d like to change the looking and feel about the angular2 material s dialog  For example  to change the fixed size of the popup container and make it scrollable  change the background color  so forth  What s the best way to do so  Is there a css that I can play with

User · Answer

With 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 global (haven't been able to make this work elsewhere), e.g. in styles.css:

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

Done!

User · Answer

There are two ways which we can use to change size of your MatDialog component in angular material   1  From Outside Component Which Call Dialog Component  import   MatDialog  MatDialogConfig  MatDialogRef   from   angular material     dialogRef  MatDialogRef  lt any gt     constructor public dialog  MatDialog       openDialog             this dialogRef   this dialog open TestTemplateComponent                height   40                width   60                       this dialogRef afterClosed   subscribe result   gt                this dialogRef   null                      2  From Inside Dialog Component  dynamically change its size  import   MatDialog  MatDialogConfig  MatDialogRef   from   angular material    constructor public dialogRef  MatDialogRef lt any gt         ngOnInit             this dialogRef updateSize  80     80             use updateSize   in any function in dialog component  it will change dialog size automatically   for more information check this link https   material angular io components component dialog

User · Answer

I think you need to use  deep   because your CSS may not see your modal class  For example  if you want to customize  modal-dialog   deep  modal-dialog     width  75   important      But this code will modify all your modal-windows  better solution will be    host      deep  modal-dialog     width  75   important

User · Answer

dialog-component css  This code works perfectly for me  other solutions don t work   Use the   ng-deep shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views  The   ng-deep combinator works to any depth of nested components  and it applies to both the view children and content children of the component      ng-deep  mat-dialog-container       height  400px  important      width  400px  important

User · Answer

sharing the latest on mat-dialog two ways of achieving this     1  either you set the width and height during the open  e g    let dialogRef   dialog open NwasNtdSelectorComponent        data            title   NWAS NTD             width   600px       height   600px       panelClass   epsSelectorPanel        or 2  use the panelClass and style it accordingly   1  is easiest but 2  is better and more configurable

User · Answer

You can inspect the dialog element with dev tools and see what classes are applied on mdDialog    For example   md-dialog-container is the main classe of the MDDialog and has padding  24px  you can create a custom CSS to overwrite whatever you want   md-dialog-container         background-color   000        width  250px        height  250px     In my opinion this is not a good option and probably goes against Material guide but since it doesn t have all features it has in it s previous version  you should do what you think is best for you

User · Answer

On smaller screen s like laptop the dialog will shrink  To auto-fix  try the following option  http   answersicouldntfindanywhereelse blogspot com 2018 05 angular-material-full-size-dialog-on html  Additional Reading https   material angular io cdk layout overview  Thanks to the solution in answersicouldntfindanywhereelse  2nd para    it worked for me   Following is needed  import   Breakpoints  BreakpointObserver   from   angular cdk layout

User · Answer

This worked for me   dialogRef updateSize  300px    300px

User · Answer

For the most recent version of Angular as of this post  it seems you must first create a MatDialogConfig object and pass it as a second parameter to dialog open   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

User · Answer

You can also let angular material solve the size itself depending on the content  This means you don t have to cloud your TS files with sizes that depend on your UI  You can keep these in the HTML CSS   my-dialog html   lt div class  myContent  gt     lt h1 mat-dialog-title fxLayoutAlign  center  gt Your title lt  h1 gt     lt form  formGroup   myForm  fxLayout  column  gt       lt div mat-dialog-content gt       lt  div mat-dialog-content gt     lt  form gt   lt  div gt    my-dialog scss   myContent       width  300px      height  150px      my-component ts  const myInfo       this dialog open MyDialogComponent    data  myInfo

User · Answer

Content in md-dialog-content is automatically scrollable   You can manually set the size in the call to MdDialog open  let dialogRef   dialog open MyComponent      height   400px     width   600px         Further documentation   examples for scrolling and sizing  https   material angular io components dialog overview  Some colors should be determined by your theme  See here for theming docs  https   material angular io guide theming  If you want to override colors and such  use Elmer s technique of just adding the appropriate css   Note that you must have the HTML 5  lt  DOCTYPE html gt  on your page for the size of your dialog to fit the contents correctly   https   github com angular material2 issues 2351

[css] Angular2 Material Dialog css, dialog size

Examples related to css

Examples related to angular

Examples related to angular-material

Examples related to angular-material2