Components: 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

1. 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.

[streldev]

1. 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?

[HarelM]

Sure, I'll update it later on tonight.
But the problem definition in the initial comment describes most of the issues.
You can use the plunker from the documentation of material and play with it to see the horrors :-)

[HarelM]

You can see some of the issues described above in the following plunker:
https://plnkr.co/edit/kb5zEClufOQ5elS2f499?p=preview
I think item 3 had been solved though.

[HarelM]

It keep breaking.
Use the following code inside the dialog html file:

<div mat-dialog-title>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
</div>
<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput tabindex="1" [(ngModel)]="data.animal">
  </mat-form-field>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
</div>
<div mat-dialog-actions>
  <button mat-button [mat-dialog-close]="data.animal" tabindex="2">Ok</button>
  <button mat-button (click)="onNoClick()" tabindex="-1">No Thanks</button>
</div>

[HarelM]

Any news on this?
The following plunker still looks hideous:
https://plnkr.co/edit/zkWK2VLzhnu4JI3mlUJf?p=preview
Are you guys seriously planning on creating a release candidate with this bug open?

[swftvsn]

I've opened a bug with repro for the non-working height issue: #8493

[HarelM]

I'm not sure this is the same.
My concern is more about the UX with this dialog when the header is large and the content does not fit the screen.
In this case setting max-height would not achieve what I think is a better approach that is used by bootstrap modal dialog.

[ishworthapaliya]

+1

[amirping]

+1

[kblicharski]

+1

[mattiLeBlanc]

You could consider a custom theme (https://material.angular.io/guide/theming-your-components) and override the mat-dialog and even the cdk-overlay-pane rendering.
At least then you can use breakpoints in your CSS.
Otherwise you have to add a window size change listenter to update your dialog widths.

[makkart]

+1 The dialog in AngularJs Material is really good, responsive and customisable. The implementation of the dialog in Angular Material is actually a deal breaker. Take a look at the old one, thats how it should work. I want to use Angular Material but i cant work with this..

[DomRaven]

Just to add to this discussion, my dialog wasn't positioned correctly because I didn't add: "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css" to my styles in the .angular-cli.json.

[ravithb]

I believe the documentation needs to be updated to include @DomRaven 's solution. It worked for me after hours of unsuccessful trying.

[HarelM]

It is in the documentation guys...
https://material.angular.io/guide/getting-started
"Step 4: Include a theme"

[mfdebian]

adding a theme still doesn't solve n°2 for mobile devices, buttons are not accesible.

[xDveGax]

I think if you add ->
this.dialog.open(MyComponent, {
height: '80vh' // or other size but with vh.
});

Regards.

[mfdebian]

@xDveGax that's what we ended up doing:

        if( this.userExperienceService.isLargeScreen() ) {
            var height = '55vh'
        } else {
            var height = '90vh'
        }

A little hacky, but does the trick.

[almartens]

Probably the Dialog API has changed. A solution for 2) in the current version should be wrapping scrollable content in a element.

Source: https://material.angular.io/components/dialog/overview#dialog-content

[HarelM]

1. Dialog position does not respect bottom (or I didn't understand what it stand for).

I stopped trying to use bottom, so I don't know if this is still an issue.

1. When dialog is too long action buttons can not be accessed.

This was improved but I have opened another bug related to it #13190

1. When using a small device the dialog is not centered.

This is now fixed!

1. when dialog has a dynamic content - content change leads to dialog size ...

This is still a horrible experience, I solved it by defining the width in the css.

Would be nice to get a reply though...

[Seh83]

This should allow you to fix apply custom dialog position overriding its default center position.

const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
width: '250px',
data: { name: this.name, animal: this.animal },
position: {
top: '0px',
left: '0px'
}
});

[Lempkin]

Any news about this? I've set a maxHeight = 95vh, but this is not ideal, I got a double scroll

[jesben]

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.

And with this, its not super, but I get the effect I want.

.cdk-global-overlay-wrapper {
  overflow: auto !important;
}

[parikhharsh96]

.cdk-overlay-container {
top: -400px; //your value here
position: relative;
}

Adding this in style.scss worked for me