md-dialog sizing feature broken in new releases

[manish2535]

In recent releases <md-dialog> is wrapped into another md-dialog-container. Due to this the sizing feature of the dialogs has stopped working.

The sizing will only work if the parent element has a layout="row" attribute added. Since md-dialog-container is added dynamically, we cant add that attribute either.

Here is the piece of styling that is supposed to take care of it-

.layout-row > .flex-66, .layout-row > .flex-66, 
.layout-row > .flex-66, .layout-row > .flex-66 {

  -webkit-flex: 1 1 66%;
      -ms-flex: 1 1 66%;
          flex: 1 1 66%;
  max-width: calc(200% / 3);
  max-height: 100%;
  box-sizing: border-box; 

}

[ThomasBurleson]

Please provide a CodePen or Plunkr that demonstrates this issue. Here are some starter demo templates that you can use/fork:

• CodePen template: http://codepen.io/pen?template=bEGJdd

[manish2535]

Basically multiples 5 WILL WORK but multiples of 33 WILL NOT WORK.

If you go to this copdepen -

http://codepen.io/anon/pen/pgVOpe

and click on the Tab Dialog Button, you will see the Dialog is not re sizing to 66% of the body even though it has <md-dialog aria-label="Mango (Fruit)" flex="66">. This is because the following styling is missing from the angular-material.css

.flex-66 {
  -webkit-flex: 1 1 66%;
      -ms-flex: 1 1 66%;
          flex: 1 1 66%;
  max-width: calc(200% / 3);
  max-height: 100%;
  box-sizing: border-box; }

[ThomasBurleson]

The dialog sizing is NOT affected with the Layout API; these directives layout, flex (etc) only affects the containers and element inside the dialog.

[manish2535]

Thanks for confirming.

[manish2535]

Just saw this in the Docs - https://material.angularjs.org/latest/api/service/$mdDialog

Sizing
Complex dialogs can be sized with flex="percentage", i.e. flex="66".

So letting you know that <md-dialog aria-label="List dialog" flex="66"> does not work!