Angular Material 2 : How to overwrite Dialog max-width to 100vw?

Question

I am trying to create 100% width Dialog. But As the original settings, it is restricted to 80vw.

.mat-dialog-container{
  max-width:80vw;
}

I have tried following ways to overwrite this value. But they weren't successful.

.mat-dialog-container {
  max-width: none;
  width: 100vw;
  height: 100vh;
}

And

.mat-dialog-container {
    max-width: none !important;
}

Someone please advise me how to overwrite 80vw to 100vw. Thank you.

There is a whole discussion discussing the problem [here](https://github.com/angular/material2/issues/3239) — Naren Murali, Sep 04 '17 at 10:00
try being more specific with the dom element. http://www.htmldog.com/guides/css/intermediate/specificity/ — Ovidiu Unguru, Sep 04 '17 at 10:00
Are you using material design and trying to override default class? You need to use more specific css rule. Target this from parent element and then try, !important may also be helpful. — Peter, Sep 04 '17 at 10:02
Please change the accepted anser to https://stackoverflow.com/a/54328008/586609 since it offers currently working solution. — Stanislav Berkov, Apr 03 '21 at 09:23

score 55 · Answer 1 · edited May 02 '20 at 19:03

55

Easiest way to solve this:

const dialogRef = this.dialog.open(MyDialogComponent, {
        width: '100vw',
        maxWidth: '100vw',
    }
)

edited May 02 '20 at 19:03

Junior Gantin

2,102
1
18
24

answered Jan 23 '19 at 13:08

Mohit Dasila

550
4
4

4

Welcome to SO, To post code as code, indent it by 4 spaces or select it then press ctrl+K – DDS Jan 23 '19 at 13:15
This is the correct answer! Avoid using `!important`! – Guntram Dec 20 '21 at 12:49
2

I wish there was a css way to do this so I can do something different in a responsive website via CSS – Maccurt Dec 30 '21 at 01:36

score 37 · Accepted Answer · edited Jul 23 '18 at 23:00

37

Add a css class in your global styles.css e.g.

.full-width-dialog .mat-dialog-container {
  max-width: 100vw !important;
}

.. then provide the panelClass to your dialog:

this.dialog.open(MyDialogComponent, {panelClass: 'full-width-dialog'})

Read this documentation.

edited Jul 23 '18 at 23:00

Frederik Struck-Schøning

12,981
8
59
68

answered Sep 04 '17 at 10:04

FAISAL

33,618
10
97
105

3

I've tried this, width: 100vw; is not working. The solution is working with max-width: 100vw !important; – Gayan Sep 04 '17 at 10:24
2

This is not actual answer anymore. Please see https://stackoverflow.com/a/54328008/586609 – Stanislav Berkov Apr 03 '21 at 09:22
Does this still work because I would rather do it in CSS so I have something different for each breakpoint – Maccurt Dec 30 '21 at 01:38
Lose the curly brackets and it works... you can also add customer data... const dialogRef = this.dialog.open(MyDialogComponent, panelClass: 'full-width-dialog'. data: {someKey: 'some data val'); – AppDreamer Apr 20 '22 at 14:44

Grzegorz Kawalec · Answer 3 · 2018-12-28T08:49:23.953

18

Try to use the property name directly as below:

this.dialog.open(MyDialogComponent, {maxWidth: '100vw !important'});

This works for me in Angular 7.

edited Dec 28 '18 at 08:49

answered Dec 27 '18 at 17:10

Grzegorz Kawalec

325
6
19

3

Thanks, was pounding my head against the wall for a day on this! The accepted answer does not seem to work, at least in Angular 7. – John Kuhns Jan 08 '19 at 13:46
5

The accepted answer is no longer valid for angular 9 as well – jamesioppolo Mar 27 '20 at 02:18

score 2 · Answer 4 · answered Aug 06 '21 at 22:06

2

you can set default options:

{ provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { maxWidth: '95vw', hasBackdrop: true } },

answered Aug 06 '21 at 22:06

Ruben

8,956
14
63
102

score 2 · Answer 5 · answered Dec 30 '21 at 02:03

I need to do this with CSS because I need it bootstrap responsive. This worked for me with NgMaterial 12.2.0

    ***in my code
    this.dialog.open(TaskItemModalComponent, {
          panelClass:'d2x-dialog-panel',
          data: taskItem,
          disableClose: true
        });   


    ***in my styles.scss
    .d2x-dialog-panel {
      max-width: 450px !important;
    }

  @include for-xsmall() {
        .d2x-dialog-panel {
        max-width: 100vw !important;
    }
  }

score 1 · Answer 6 · answered Aug 05 '19 at 06:30

1

I prefer to set things in css, then I can use different settings for responsive design.

I found myself having to use !important just to circumvent the default 90vw.

Turns out if you put maxWidth: undefined it won't do that.

dialog.open(DialogChoicesComponent, { ...options, maxWidth: undefined });

As for setting css that's a whole other topic, but you can set a backdropClass and panelClass and style them as you wish.

answered Aug 05 '19 at 06:30

Simon_Weaver

140,023
84
646
689

1

In angular8 dialog.open(DialogChoicesComponent, { ...options, maxWidth: '95%' }); works without !important for me – Logan Wlv Dec 03 '19 at 13:03

score 1 · Answer 7 · answered Apr 21 '21 at 11:06

You can achieve by two ways:

create a css class className and set max-width: 100vw ( don't restrict with mat-dialog-container because sometime cdk-overlay selector max-width is different.
Pass as a property or config on the time of Dialog open this.dialog.open(MyComponent, {maxWidth: '100vw'}); and do not forget to set actual width.

score -1 · Answer 8 · answered Sep 04 '17 at 10:02

-1

Are you using material design and trying to override default class? You need to use more specific css rule. Target this from parent element and then try, !important may also be helpful.

answered Sep 04 '17 at 10:02

Peter

10,492
21
82
132

Avoid using !important – Davis Jul 11 '18 at 19:01
2

Unfortunately, as of this date, Angular Material is specifying a max-width in the *style* of the element. `!important` is the only way to override it. :( – eltiare Oct 08 '18 at 18:35

Angular Material 2 : How to overwrite Dialog max-width to 100vw?

8 Answers8