i try add dropdown menu item in fixed div. when menu pops out, body element set negative "top" property.
here's exemple on codepen : http://codepen.io/anon/pen/vldzqg
when triggered, body element offset changed "top" property seems based on ".under" class margin-top property :
style="position: fixed; width: 100%; top: -87.2031px; overflow: hidden;" can tell me why , how avoid ? chrome provide white box @ bottom.
you using angular material, wrap screen column layout , assign flex div per requirements.
remove css tricks have done. in css kept background colors , tag questions others can help
<div layout="column" class="md-menu-demo menudemobasicusage" ng-controller="basicdemoctrl ctrl" ng-cloak="" ng-app="myapp"> <div flex class="top"> <md-menu> <md-button aria-label="open phone interactions menu" class="md-icon-button" ng-click="ctrl.openmenu($mdopenmenu, $event)"> <md-icon md-menu-origin="" md-svg-icon="call:phone"></md-icon> </md-button> <md-menu-content width="4"> <md-menu-item> <md-button ng-click="ctrl.redial($event)"> <md-icon md-svg-icon="call:dialpad" md-menu-align-target=""></md-icon> redial </md-button> </md-menu-item> <md-menu-item> <md-button disabled="disabled" ng-click="ctrl.checkvoicemail()"> <md-icon md-svg-icon="call:voicemail"></md-icon> check voicemail </md-button> </md-menu-item> <md-menu-divider></md-menu-divider> <md-menu-item> <md-button ng-click="ctrl.togglenotifications()"> <md-icon md-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> <div flex class="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> 
Comments
Post a Comment