html - Move Angular Material Dropdown menu to the left -
i using angular material. have created navigation bar , dropdown menu.
it looks this:
i move dropdown
left-hand side. now, appears around centre.
html code:
<md-toolbar layout="row" class="md-whiteframe-z3" style="padding: 0px;margin:0px;float: left;"> <h2>material navbar</h2> <md-menu> <md-button md-menu-origin ng-click="$mdopenmenu()">dropdown</md-button> <md-menu-content width="2"> <md-menu-item> <md-button>help</md-button> </md-menu-item> <md-menu-item> <md-button>about</md-button> </md-menu-item> </md-menu-content> </md-menu> <md-button aria-label="go back"> go </md-button> <md-button>item 1</md-button> <md-button>item 2</md-button> </md-toolbar>
how can code modified move dropdown
left beside text material navbar
?
you need add <span flex> </span>
in code.
<md-toolbar layout="row" class="md-whiteframe-z3" style="padding: 0px;margin:0px"> <h2>material navbar</h2> <md-menu> <md-button md-menu-origin ng-click="$mdopenmenu()">dropdown</md-button> <md-menu-content width="2"> <md-menu-item> <md-button>help</md-button> </md-menu-item> <md-menu-item> <md-button>about</md-button> </md-menu-item> </md-menu-content> </md-menu> <span flex></span> <md-button aria-label="go back"> go </md-button> <md-button>item 1</md-button> <md-button>item 2</md-button>
here working example. http://codepen.io/next1/pen/raynxw
Comments
Post a Comment