Full screen dialog in mobile mode

[AccessViolator]

Bug, feature request, or proposal:

A bug to me

What is the expected behavior?

Being able to have full screen dialogs by overriding cdk-overlay-pane class

What is the current behavior?

Not possible because framework adds max-width: 80vw; to element's style

What are the steps to reproduce?

Override cdk-overlay-pane with width: 100% and see it ignored because of max-width: 80vw; in the style

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

Displaying html blobs of site's T&C and privacy policy. May not the best way to use dialogs, but nonetheless...

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

Angular 5.2.3, Material 5.2.0

Is there anything else we should know?

I'm upgrading a site from an early 2.0.0.beta8 where this was possible.

[willshowell]

I hadn't noticed this change, but I used to use this and it was working fine:

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

Now it seems !important is the best I can do 😕

.my-full-screen-dialog {
  height: 100vh;
  width: 100vw !important;
  max-width: none !important;
}

[AccessViolator]

It appears adding max-width: none !important; to cdk-overlay-pane does the trick, thank you.

[gimox]

The solution above work good but container is not in full screen and can scrool max to 65vh.
I try an other solution using flexbox:

dialog options:

  show(data: Book) {
    this.dialogRef = this.dialog.open(BookCardDialogComponent, {
      panelClass: 'bookCardDialog',
      maxWidth: '100vw',
      maxHeight: '100vh',
      height: '100%',
      width: '100%',
      data: data
    });
  }

dialog html

<div style="display: flex; flex:1; background-color: #1b6d85; height: 100%;  flex-direction: column">

  <div style="height: 50px; background-color: #4cae4c;">title</div>
  <div style="background-color: #8c8c8c; flex: 1; overflow: scroll">

    <div style="height: 100px; background-color: #3c763d">1</div>
    <div style="height: 100px; background-color: #3c763d">2</div>
    <div style="height: 100px; background-color: #3c763d">3</div>
    <div style="height: 100px; background-color: #3c763d">4</div>
    <div style="height: 100px; background-color: #3c763d">5</div>
    <div style="height: 100px; background-color: #3c763d">6</div>
    <div style="height: 100px; background-color: #3c763d">7</div>
    <div style="height: 100px; background-color: #3c763d">8</div>
    <div style="height: 100px; background-color: #3c763d">9</div>
    <div style="height: 100px; background-color: #3c763d">10</div>
    <div style="height: 100px; background-color: #3c763d">11</div>
    <div style="height: 100px; background-color: #3c763d">11</div>
    <div style="height: 100px; background-color: #3c763d">11</div>
    <div style="height: 100px; background-color: #3c763d">11</div>
    <div style="height: 100px; background-color: #3c763d">11</div>
    <div style="height: 100px; background-color: #3c763d">11</div>
    <div style="height: 300px; background-color: #3c763d">11</div>
    <div style="height: 300px; background-color: #3c763d">11</div>
    <div style="height: 300px; background-color: #3c763d">11</div>
    <div style="height: 300px; background-color: #3c763d">11</div>
    <div style="height: 200px; background-color: #3c763d">11</div>
    <div style="height: 100px; background-color: #3c763d">16</div>
  </div>
  <div style="height: 50px; background-color: #3c3c3c;"> <button mat-button color="primary" mat-dialog-close>CHIUDI</button></div>
</div>

now it has 100% height and width and we have a header and footer fixed and a container that scrool content.

[jtcrowson]

It'd be nice if modals could provide a full screen modal when on mobile (sm & xs) screens.

[galki]

can we get this reopened? ideally there should be fullscreen dialog support like in material ui.

[goldenbearkin]

fullscreen dialog is actually in the material design spec. https://material.io/design/components/dialogs.html#full-screen-dialog

can we have something like this in angular material?

[jer-tx]

Looking for this as well. This was a feature in AngularJS material, doesn't really make sense that it's absent in angular material. Setting width/height to 100 doesn't work since we only want that to happen when the view is mobile. This worked perfectly in angularJS material.

[olivierlevy]

This is working for me, program your dialog with the cdk/layout:

• import this:

import {
  BreakpointObserver,
  Breakpoints,
  BreakpointState
} from '@angular/cdk/layout';

• define an Observable of the BreakpointState to check screen size

  isExtraSmall: Observable<BreakpointState> = this.breakpointObserver.observe(
    Breakpoints.XSmall
  );

• add this property in the constructor

private readonly breakpointObserver: BreakpointObserver

• and then in your method where you call the dialog:

const d = this.dialog.open(DialogXXXXXComponent, {
  width: 'calc(100% - 50px)',
  maxWidth: '100vw'
});
const smallDialogSubscription = this.isExtraSmall.subscribe(size => {
  if (size.matches) {
    d.updateSize('100vw', '100vh');
  } else {
    d.updateSize('calc(100% - 50px)', '');
  }
});
d.afterClosed().subscribe(() => {
  smallDialogSubscription.unsubscribe();
});

Make sure to set maxWidth: '100vw' to override the default 80vw

If size matches we update the size to fullscreen: d.updateSize('100vw', '100vh');

otherwise you can set a width and leave the default height: d.updateSize('calc(100% - 50px)', '');

[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.}