CODEWITHSUNDEEP
htmlcssangularjs
Elcibi
Elcibi

Reputation: 3

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

Upvotes: 0

Views: 997

Answers (1)

rupesh_padhye
rupesh_padhye

Reputation: 1405

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>

Upvotes: 0

Related Questions