Angular2 Material Dialog css, dialog size

css angular angular-material angular-material2
ethan picture ethan · Nov 14, 2016 · Viewed 105.3k times · Source

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?

Answer

Alexander Taylor picture Alexander Taylor · Jan 26, 2017

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 <!DOCTYPE html> on your page for the size of your dialog to fit the contents correctly ( https://github.com/angular/material2/issues/2351 )

Related questions

angular material 2 table header center alignment

If md-sort-header is added into md-header-cell in md-table, it is always left-alignment. How to center-align header cells, such "name"? <md-header-cell *cdkHeaderCellDef md-sort-header style="text-align:center"> Name </md-header-cell> plnkr

Read More
Set font size of Angular Material Tooltip

I am very new to web development, and I cannot figure out how to solve the following issue, although it may be very easy. I am using Angular 4 and Angular Material to implement tooltips like this: <div mdTooltip="tooltip …

Read More
How to set width of mat-table column in angular?

Here in my mat-table have 6 column when any column has not more words then it looks like Image-1, but when any column has more words then UI looks like Image-2, so how to set UI like Image-1 when any column …

Read More