CODEWITHSUNDEEP
angularangular-material
Gayan
Gayan

Reputation: 2935

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

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.

Upvotes: 39

Views: 52626

Answers (9)

Murat Özbayraktar
Murat Özbayraktar

Reputation: 152

Inside of your dialog component css add this. Its working on angular 16.

::ng-deep {
   .cdk-overlay-pane {
       max-width: 100vw !important;
       max-height: 100h !important;
   }
}

Upvotes: 0

Maccurt
Maccurt

Reputation: 13817

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;
    }
  }

Upvotes: 2

Ruben
Ruben

Reputation: 9186

you can set default options:

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

Upvotes: 3

Viplav Soni
Viplav Soni

Reputation: 1727

You can achieve by two ways:

  1. 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.
  2. 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.

Upvotes: 1

Mohit Dasila
Mohit Dasila

Reputation: 650

Easiest way to solve this:

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

Upvotes: 65

Simon_Weaver
Simon_Weaver

Reputation: 146188

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.

Upvotes: 1

Grzegorz Kawalec
Grzegorz Kawalec

Reputation: 325

Try to use the property name directly as below:

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

This works for me in Angular 7.

Upvotes: 18

FAISAL
FAISAL

Reputation: 34691

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.

Upvotes: 37

Vishal
Vishal

Reputation: 10964

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.

Upvotes: -1

Related Questions