Full screen or full width of Dialog?

[zijianhuang]

Bug, feature request, or proposal:

I would like to have the dialog has full width of the screen. I may want full screen in some scenarios.

What is the expected behavior?

Full width.

What is the current behavior?

With such codes:

  openDialog() {
    let dialogRef = this.dialog.open(DialogResultExampleDialog, {width: window.innerWidth+'px'});
    dialogRef.afterClosed().subscribe(result => {
      this.selectedOption = result;
    });
  }

The dialog expands to the left edge of the screen, but there's still large space between the right border and the right edge.

What are the steps to reproduce?

In https://material.angular.io/components/dialog/examples, and click Edit in Plunker, then copy/paste above codes, particularly with {width: window.innerWidth+'px'}
or {width: '100%'}

What is the use-case or motivation for changing an existing behavior?

Small mobile screen

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Past versions and the latest:

  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/flex-layout": "^2.0.0-rc.1",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/material": "^2.0.0-beta.7",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/platform-server": "^4.2.4",
    "@angular/router": "^4.2.4",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.25",
    "@types/core-js": "^0.9.42",
    "@types/jasmine": "^2.5.53",
    "@types/node": "^6.0.77",
    "@types/selenium-webdriver": "^2.53.42",
    "angular-in-memory-web-api": "^0.2.5",
    "concurrently": "^3.5.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "jasmine-core": "^2.6.4",
    "karma": "^1.7.0",
    "karma-chrome-launcher": "^2.2.0",
    "moment": "^2.18.1",
    "reflect-metadata": "^0.1.10",
    "rimraf": "^2.6.1",
    "rxjs": "^5.4.1",
    "systemjs": "^0.19.47",
    "typescript": "^2.4.1",
    "zone.js": "^0.8.10"
  },

Is there anything else we should know?

It might be even better to have full, fullWidth, fullHeight in MdDialogConfig.

[willshowell]

Dupe of #3239

Also you can use panelClass for adding whatever css you want.

[zijianhuang]

thanks willshowell. This works well, and elegantly enough.

[sathyapv92]

hi willshowell i tried your changes , but still dialogbox is not coming in full screen width.
.my-full-screen-dialog .mat-dialog-container {
max-width: none;
width: 100vw;
height: 100vh;
}

let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
panelClass: 'my-full-screen-dialog',

  data: { name: this.name, animal: this.animal }
});

please correct me if am wrong.

email id is sathyapv92@gmail.com

[willshowell]

@sathyapv92 see #9823 (comment). The solution has changed since I wrote that comment.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}