adding fullscreen option for mobile to $mdDialog

[dohomi]

Hello,
I would like to know if you plan to include a fullscreen option to $mdDialog with some more responsive functionalities? Would be very great for using dialogs on mobile devices:

http://www.google.com/design/spec/components/dialogs.html#dialogs-full-screen-dialogs

Thanks for your great work!

[anderson-arlen]

+1

[TBxy]

+1

[stunaz]

+1

[kevindstanley1988]

+1

[rschmukler]

I am wondering if this is more of a request for a router-like functionality that happens to animate like a full-screen dialog... ie. thinking in-terms of ui-router-like states I see that dialog as being something like:

$stateProvider.state('calendar.new-event', function() {
  return {
    templateUrl: '/my-full-screen-dialog/template.html',
    controller: 'MyFullScreenCtrl',
    animate: 'full-screen-dialog'
  }
});

My point being, is this something that we really want to shoe-horn into the $mdDialog service, or is it really more of a feature to be handled by some sort of router

[dohomi]

Very helpful would be a variable to inject into the controller on which media breakpoint the dialog should be displayed fullscreen:

$mdDialog.show({
  controller:'MyController',
  controllerAs:'vm',
  mdIsFullscreen: 'sm,md' 
});

// or maybe even better inside of html directive:

<md-dialog md-is-fullscreen="$mdMedia('max-width:800px')">

This would cover almost every use case and I'd rather like to see this feature inside of the $mdDialog than outside of the component. For a hybrid app most of the dialogs working well with the default handling, but lets say for 'sm' and 'md' on a more complex dialog I'd like to show it fullscreen. It would be great to support similar handling like the md-is-locked-open="$mdMedia('min-width: 333px')" of the mdSidenavcomponent.

[kevindstanley1988]

+1 @dohomi fantastic thoughts. I would love to see that implemented exactly as you have described!

[anderson-arlen]

Modifying a dialog to be full screen just takes a couple lines of CSS: see CodePen. While a standardized class for this would be nice, I think we should instead focus our energy on opening multiple dialogs as that is the core functionality we are missing here. See #698.

[ianchenguo]

+1

[adamwmeek]

+1

[guiporto]

+1

[subins]

+1

[bradmartin]

Since @anderson-arlen codepen isn't available.

Use the following css class on md-dialog and it should be full screen and working fine. You might want to wrap this in a media query depending on your needs like so.

/* $mdDialog - fullscreen dialog styling */
@media screen and (max-width: 760px){

       .fullscreen-dialog {
       height:100%;
       width:100%;
       max-height:100%;
       max-width: 100%;
       position: absolute;
       top: 0;
       left: 0;
       border-radius: 0;
   }
}

This is working fine for my mobile app without any issues.

[rafaelgondim]

+1

[galenbrazell]

+1

[jamalx31]

+1

[lukmadev]

+1

@bradmartin Very nice. :)

[plaramee1]

+1, It's a must for mobile devices !

[ghost]

+1