Angularjs菜单改变身体的顶部位置？ [英] Angularjs menu alter body top position?

问题描述

我尝试在固定div中添加下拉菜单项。但是当弹出菜单时，我的body元素被设置为负的top属性。

以下是codepen的一个例子： http：// codepen.io/anon/pen/vLdzQG

触发时，body元素偏移量会随着top属性而改变，这似乎是基于我的.underclass margin-top property：

  style =position：fixed; width：100％; top：-87.2031 px; overflow：hidden; 
  

有人能告诉我为什么以及如何避免这种情况？使用Chrome时，底部会提供一个白色框。

解决方案

您正在使用角度材质屏幕列布局并根据需要为div分配flex。

Angular Material布局文档

删除所有已完成的CSS技巧。在CSS中只保留背景颜色并正确标记问题，以便其他人可以帮助

 < div layout =columnclass =md -menu-demo menudemoBasicUsageng-controller =BasicDemoCtrl as ctrlng-cloak =ng-app =MyApp> 
< div flex class =top> 
< md-menu> 
< md-button aria-label =打开手机互动菜单class =md-icon-buttonng-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：dialpadmd-menu-align-target =>< / md-icon> 
重拨
< / md-button> 
< / md-menu-item> 
< md-menu-item> 
< md-button disabled =disabledng-click =ctrl.checkVoicemail（）> 
< md-icon md-svg-icon =call：voicemail>< / md-icon> 
检查语音信箱
< / 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？ '禁用'：'启用'}}通知
< / md-button> 
< / md-menu-item> 
< / md-menu-content> 
< / md-menu> 
< / div> 
< div flex class =under> $ p $ lt; p>< p>< p>< p>< p> p为H. 5℃; / p为H.< p为H. 6≤/ p为H.< p为H. 7 LT; / p为H.< p为H. 8 LT; / p为H.< p为H.; 9< / p为H.< p为H. 0℃; / p为H.< p为H. 1·; / p为H.< p为H. 2'; / p为H.< p为H. 3'; / p为H.< p为H. 4℃; / p为H.< p为H. 5℃; / p为H.< p为H. 6 LT; / p为H.< p为H. 7 LT; / p为H.< p为H. 8 LT; / p为H.< p为H.; 9< / p为H.< p为H. 0℃; / p>< / DIV> 
< / div> 
  

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.io/anon/pen/vLdzQG

When triggered, the body element offset is changed with a "top" property that seems to be based on my ".under" class margin-top property :

style="position: fixed; width: 100%; top: -87.2031px; overflow: hidden;"

Can someone tell me why and how to avoid this ? With Chrome this provide a white box at the bottom.

解决方案

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">
  <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>

这篇关于Angularjs菜单改变身体的顶部位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！