title: Angular material menu position (notification bar)
body: <p>I'm trying to create a notification bar that shows up on the left bottom of the bell icon when it's clicked.</p>
  
  <p>An example can be seen here : <a href="http://wrapbootstrap.com/preview/WB011H985" rel="nofollow">http://wrapbootstrap.com/preview/WB011H985</a></p>
  
  <p>I tried giving it a specific margin-top (140px) but when you scroll down a little and clicked the bell, notification shows up way too below.</p>
  
  <p><a href="http://codepen.io/anon/pen/NxgePe" rel="nofollow">http://codepen.io/anon/pen/NxgePe</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="md-menu-demo menudemoMenuPositionModes" ng-controller="PositionDemoCtrl as ctrl" ng-cloak="" style="min-height:350px;" ng-app="MyApp"&gt;
    &lt;div class="menu-demo-container" layout-align="start center" layout="column"&gt;
      &lt;div class="menus" layout-wrap="" layout="row" layout-fill="" layout-align="space-between center" style="min-height:200px;"&gt;
        &lt;div layout="column" flex-sm="100" flex="33" layout-align="center center"&gt;
          &lt;p&gt;&lt;code&gt;md-position-mode="target-right target"&lt;/code&gt;&lt;/p&gt;
          &lt;md-menu md-position-mode=""&gt;
            &lt;md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)"&gt;
              &lt;img ng-src="https://cdn4.iconfinder.com/data/icons/unigrid-flat-basic/90/019_025_bell_ring_alarm_notice_notification_notify-32.png"&gt;
            &lt;/md-button&gt;
            &lt;md-menu-content width="6"&gt;
              &lt;md-menu-item ng-repeat="item in [1, 2, 3]"&gt;
                &lt;md-button ng-click="ctrl.announceClick($index)"&gt;
                    &lt;div layout="row"&gt;
                      &lt;p flex=""&gt;Option {{item}}&lt;/p&gt;
                      &lt;md-icon md-svg-icon="call:portable-wifi-off" style="margin: auto 3px auto 0;"&gt;&lt;/md-icon&gt;
                    &lt;/div&gt;
                &lt;/md-button&gt;
              &lt;/md-menu-item&gt;
            &lt;/md-menu-content&gt;
          &lt;/md-menu&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.menudemoMenuPositionModes .md-menu-demo {
    padding: 24px; }
  
  .menudemoMenuPositionModes .menu-demo-container {
    min-height: 200px; }
  
  #menu_container_0 {
    background-color:red;
    margin-top:140px;
  }
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>angular
    .module('MyApp',['ngMaterial', 'ngMessages'])
    .config(function($mdIconProvider) {
      $mdIconProvider
        .iconSet("call", 'img/icons/sets/communication-icons.svg', 24)
        .iconSet("social", 'img/icons/sets/social-icons.svg', 24);
    })
    .controller('PositionDemoCtrl', function DemoCtrl($mdDialog) {
      var originatorEv;
  
      this.openMenu = function($mdOpenMenu, ev) {
        originatorEv = ev;
        $mdOpenMenu(ev);
      };
  
      this.announceClick = function(index) {
        $mdDialog.show(
          $mdDialog.alert()
            .title('You clicked!')
            .textContent('You clicked the menu item at index ' + index)
            .ok('Nice')
            .targetEvent(originatorEv)
        );
        originatorEv = null;
      };
    });
  </code></pre>