Angularjs Menu Alter Body Top Position?

I try to add a dropdown menu item in a fixed div. But when the menu pops out, my body element is set with a negative 'top' property. Here's an exemple on codepen : http://codepen.

Solution 1:

You are using angular material, wrap screen column layout and assign flex to div as per requirements.

Angular Material layout doc

remove all the css tricks you have done. in CSS just kept background colors and tag questions properly so others can help

    <div layout="column"class="md-menu-demo menudemoBasicUsage" ng-controller="BasicDemoCtrl as ctrl" ng-cloak="" ng-app="MyApp">
  <divflexclass="top"><md-menu><md-buttonaria-label="Open phone interactions menu"class="md-icon-button"ng-click="ctrl.openMenu($mdOpenMenu, $event)"><md-iconmd-menu-origin=""md-svg-icon="call:phone"></md-icon></md-button><md-menu-contentwidth="4"><md-menu-item><md-buttonng-click="ctrl.redial($event)"><md-iconmd-svg-icon="call:dialpad"md-menu-align-target=""></md-icon>
              Redial
            </md-button></md-menu-item><md-menu-item><md-buttondisabled="disabled"ng-click="ctrl.checkVoicemail()"><md-iconmd-svg-icon="call:voicemail"></md-icon>
              Check voicemail
            </md-button></md-menu-item><md-menu-divider></md-menu-divider><md-menu-item><md-buttonng-click="ctrl.toggleNotifications()"><md-iconmd-svg-icon="social:notifications-{{ctrl.notificationsEnabled ? 'off' : 'on'}}"></md-icon>
              {{ctrl.notificationsEnabled ? 'Disable' : 'Enable' }} notifications
            </md-button></md-menu-item></md-menu-content></md-menu></div><divflexclass="under"><div><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>0</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>0</p></div></div>