Milind Milind - 5 months ago 73
CSS Question

Angularjs with Material design md-menu-item Vertical issue

I am creating menu as per the demo of the angularjs material. In the demo menu is coming vertical as it is dynamic. But the same menu if I create manually then it is creating horizontal.

enter image description here

My some code

<md-toolbar>
<div class="md-toolbar-tools">
<md-menu md-position-mode="target-left bottom" md-offset="-22 6">
<md-button aria-label="Plan & Book" ng-click="$mdOpenMenu($event)">
Parent Item 1
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button>Item 1</md-button>
<md-button>Item 2</md-button>
<md-button>Item 3</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<md-menu>
<md-button aria-label="Manage A Booking" ng-click="$mdOpenMenu($event)">
Parent Item 2
</md-button>
<md-menu-content class="dropdown">
</md-menu-content>
</md-menu>
</div>
</md-toolbar>


My full code pen
http://codepen.io/milindsaraswala/pen/dXvVOa

How can I make it vertical menu !!

Answer

You have to separate the <md-menu-item>:

<md-menu-item>
    <md-button>Item 1</md-button>
</md-menu-item>
<md-menu-item>
    <md-button>Item 2</md-button>
</md-menu-item>
<md-menu-item>
    <md-button>Item 3</md-button>
</md-menu-item>

Your code updated: http://codepen.io/anon/pen/beqaqZ