Material: Configurable position for mdDialog

[ErinCoughlan]

I'm trying to create a custom dialog using mdDialog, but the position is always set to the middle of the screen. I would like to be able to configure it to be above the button that opens the dialog, the same way that mdMenu does.

[ddimitrop]

+1 for custom positioning.

We would like to configure dialogs to animate and stay on the right side of the screen.

[clshortfuse]

You can supply your own CSS to override the default ones.

This is what I use for one of my apps:

.md-dialog-container {
  position: absolute;
}

md-dialog {
  max-width: 90%;
  max-height: 90%;
}

This is global, but you can always assign an id to limit the scope.

[ddimitrop]

Sure, but this is fragile as it depends on internal implementation. Also animations may look wrong - for example a side dialog would probably animate from that side.
It may be possible to override animations but this becomes ever more fragile.

[NickBolles]

I would also like to see an option for full screen dialog https://www.google.com/design/spec/components/dialogs.html#dialogs-full-screen-dialogs
This is pretty easy with a custom dialog template and putting the buttons in the toolbar, but it would be cool if it was baked in

[ErinCoughlan]

I would also like to be able to specify whether the dialog animates in from the left or right corner. Currently, the dialog always animates from the left side regardless of position. This only happens the first time the dialog is opened. All other times, it correctly opens and closes from the clicked icon.

We are using dialog to create complicated custom menus. md-menu does not allow enough flexibility to design the popups the way we want. md-dialog has everything we need except for the positioning control.

[clshortfuse]

@erinkidd01 the animation starts based on the event being pass to it. if you pass the click event of a button, then the animation would start from the cursor position.

[ThomasBurleson]

@all - After the v1.0 release, we are planning on enhancing Dialog to include:

• Full-screen mode
• Drag Repositioning and (persistence of dialog positions)
• Animation options for slide In (left, top, right bottom)
• Custom positioning
• Multiple Dialog stacking

[ErinCoughlan]

@clshortfuse Yes, it starts from the click event. The problem is that the animation is from the left corner of the dialog, which is fine if you always position the dialog in the center of the screen. However, if you position the dialog near the top right of the screen, you want the animation to be from the top right corner of the dialog (similar to the way mdMenu is implemented). Otherwise, it's very difficult to get a smooth transition.

[spoco2]

I'd love to be able to do this too... I'm trying to use mdDialog to create a menu that comes from a button on the top of the screen (a fair bit of content in it).

I can't even get anything to work using css (without affecting ALL dialogs, which I don't want to), because the element that you get to provide within the template is wrapped inside another which actually defines the size and position. So there's no access to applying a custom class to that one to allow for custom placement.

(Even an ability to pass a className as an option that is applied to the md-dialog element would be superb)

edit: I take it back somewhat, I didn't know you could provide up to the md-dialog level within the template. This allows styling at the top level of dialog box, per dialog as needed... so that helps

[ErinCoughlan]

@spoco2 I have a hack that works for now to configure positions. The animations are slightly messed up, but at least the dialog is in the correct location.

Before showing the dialog, calculate the position of where you want it to go, pass that value as part of locals, and then in a timeout in your dialog-controller, set the position of the dialog. You can look at the code for mdMenu to see a more sophisticated solution based on whether the element is on the left or right of the screen.

Ctrl:

var button = $element.get(0);
var rect = button.getBoundingClientRect();
var position = {top: rect.top, left: rect.left};

var presets = {
  templateUrl: 'my-dialog-template.html',
  locals: { 'position', position },
  controller: DialogCtrl,
  ...
};

$mdDialog.show(presets);

DialogController:

constructor: function(position) {
  ...
  $timeout(function() {
    var el = $('md-dialog');
    el.css('position', 'fixed');
    el.css('top', position['top']);
    el.css('left', position['left']);
  });
};

[spoco2]

@ErinCoughlan Thanks, I've passed on trying to use mdDialog for my slide down menu, was illfitted.

Have used basic CSS and Angular to get what I wanted :)

[alexey-shaposhnikov]

+1 for custom positioning.

We would like to configure dialogs to animate and stay on the right side of the screen.

[csvan]

+1

[scriptsure]

+1 on the new modifications
Full-sreen mode
Drag Repositioning and (persistence of dialog positions)
Animation options for slideIn (left, top, right bottom)
Custom positioning
Multiple Dialog stacking

[ismarslomic]

+1

[alignus-abe]

+1

[bluebirdtech]

+1

[jpike88]

This is pretty important for cordova apps where the dialog contains an input but the keyboard doesn't push the page upwards.

Case in point:

[caribnow]

+1

[nicolasletoublon]

+1

[mutluoskan]

+1
I also would like to configure dialogs to animate and stay on the bottom side of the screen.

[smurugavel]

+1 for custom positioning.
@daniel-nagy implemented something similar on his data table. I am referring the "comment" table column from the demo. codepen..
And, here is his source code, if someone needs it.
https://github.com/daniel-nagy/md-data-table/blob/master/src/scripts/mdEditDialog.js

[waterplea]

This is closed as deprecated but what does that mean? How do we position mdDialog?

[ErinCoughlan]

@waterplea Use mdPanel, which you can position anywhere on the screen and even reposition it once it's open.

[bluebirdtech]

@ErinCoughlan Thanks for that info. I'd seen mdPanel mentioned a few times but didn't know what it was or how useful it sounds. :)

[juan-david-correa]

In angula 2

   private showInfoAccount(client: Client): void {
          const config = new MdDialogConfig();
          config.position = {
              top: "10"
          }
          config.data = client
          this.dialog.open(ShowInfoAccountComponent, config);
    }

[WaterBleu]

@juan-david-correa
this is not working for me.
all this does it move it to the top of the screen but not actual 10px from top

Unit is needed so '10px' instead of '10'

[fabiannagel]

Is there any news on this topic? "position: fixed;" works but it screws up the animations

[jpduckwo]

I solved this with:

• Setting a class on the dialog so it can have some specific styles set from CSS
• Using the position option to set the top value to be something I wanted (in px)
• Using a media query to adjust the margin-top for a different screen widths

Component

    this.loginComponentRef = this.dialog.open(LoginComponent, {
      panelClass: 'mylogin',
      position: {
        top: '80px',
      }
    });

In the background the dialog takes this top: '80px' and sets a margin-top to the element style at run time. You can then override the margin-top with css.

Global Styles (or equivalent that isn't cssnext)

.mylogin {
  @media (max-width: 600px) {
    margin-top: 20px !important;
  }
}

[bindu24]

Where can I find all the released versions of @angular/material?

[Splaktar]

@bindu24 Please submit Angular Material questions here. This repo is for AngularJS Material.

You can find the @angular/material releases here.