Dialog position and size problems

[HarelM]

Bug

Dialog position and size are not working well:

1. Dialog position does not respect bottom (or I didn't understand what it stand for).
2. When dialog is too long action buttons can not be accessed.
3. When using a small device the dialog is not centered.
4. This is more of a UX issue - when dialog has a dynamic content - content change leads to dialog size change which is a not a good user experience.

What is the expected behavior?

There are a few bugs here:

1. when setting bottom - the lower end of the dialog location should be fixed.
2. action buttons should always be reachable (even if it requires scrolling).
3. dialog should be centered on small devices.
4. I would say that a non dynamic (at least in terms of width) dialog would create better user experience, see my comments at the end.

What is the current behavior?

As described in the bug.

What are the steps to reproduce?

https://plnkr.co/edit/fwCkVfkc04BBwguHT00p?p=preview
4. does not exist in the above plunker, but dynamic content change of dialog content should present what I define as a not so good UX.

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

Bad user experience.

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

angular 4.0.3 material 2.0 beta 3.

Is there anything else we should know?

I'm migrating my code from angularjs to angular and from angular-bootstrap-ui to angular material.
The modal in angular bootstrap is behaving well in all the terms I have listed above and creates a very nice user experience, I think it's worth looking at its behavior.

2. is a real pain on mobile devices. I had to remove the title to display the action buttons. Would be great to get this fixed soon.

[HarelM]

Any updates on this? This is a blocker for publishing my site to production...

[DanRibbens]

My personal favorite is that setting config.height to 100% will leave you with 35% of the bottom of the dialog as useless whitespace. Why is this not dynamic like how ng-material does it with flex box?

[SvenBudak]

+1 Please make it possible to style dialogs for Mobile Devices.

[DanRibbens]

It would be better to use a custom class to acheive this probably but I ended up getting by with some css that looks like this for a dialog with config 100% for height and width on mobile only.

.mat-dialog-container {
    display: flex !important;
    flex-direction: column;
}

.mat-dialog-container > * {
    display: flex;
    flex-direction: column;
}

.mat-dialog-content {
    max-height: inherit !important;
}

.mat-dialog-actions {
    display: block !important;
    flex-grow: inherit;
    flex-shrink: inherit;
    padding: 12px 0 0 !important;

    &:last-child {
        margin-bottom: 0 !important;
    }
}

I don't love it, but it does what I wanted.

[SvenBudak]

And What you guys think about this?:

let dialogRef = dialog.open(UserProfileComponent, {
  height: '400px',
  width: '600px',
});

It make it impossible to make it Responsive, but maybe i missunderstand this function?

[DanRibbens]

I'm not following your question @BamiGorengo. 600px wide isn't going to work on portrait orientation for most mobile devices. The snippet I gave above was for making a full screen dialog on mobile. If you give it a height and width of 100% it does OK and doesn't seem to cause any harm for lesser percents. In my case the dialog is being used to show more than a mobile screen worth of content.

I have not played around with specifying the number of pixels. What is it you are trying to do?

[HarelM]

Any updates on this? While the workaround provided by @DanRibbens might work the dialog still looks bad. The fact that this kind of issue (which I believe is critical) is now open more than a month and a half is a major turn-off for me...

[willshowell]

FWIW I was able to center the dialog with this:

// global styles
.my-centered-dialog {
  max-width: 80vw;

  .mat-dialog-container {
    max-width: none;
  }
}

this.dialog.open(MyComponent, {
  panelClass: 'my-centered-dialog',
  width: '512px'
});

...but I agree, the whole size/positioning experience could be improved.

[HarelM]

Is anyone from the maintainers looking into this? My users are suffering... :-(((
The main UI rejects I get are on the dialogs I create are due to flickering size changes and header taking too much space. I don't know how to make it better but it has to go through a major overhaul...

[emilio-martinez]

@HarelM I don't know if it's just me, but your plnkr is breaking for me. Would you mind taking a look and updating?