Positioning $mdDialog

$mdDialog can be very useful.  I’ve already mentioned how it can be used as a regular popup.  In this post I’ll explain about the $mdDialog positioning.

The default behavior is a dialog box that opens in the center of the screen.

As you can see, the box just appears in the center of the screen.

The next step is to get the “popIn” target. This would be the source element of the popup animation, as well as the collapse animation (or popIn).  The basic (and suggested) way to go is to take the event from a click and use it. In the example below click the open button:

You’d might like to have the source of the animation at some other place, or call the “show” method from the script without a click. Here’s a trick to set the animation from elsewhere:

So far we discussed showing the dialog box and stating it’s source.  Now we’ll talk about the position after it opens.  This is quite simple – it is set using css… Here’s the deal:

Note that I’ve used “template” and not “tempalteUrl”. The issue with “tempalteUrl” is that it is called only after the animation starts, and thus, won’t have the effect you want.  So you can either use static css (as in a file) or use a template or the requirejs-text (text!My_Tempalet_File) trick to add the template inline if it’s big.

Good luck 🙂

Leave a Reply