Move Angular Material Dropdown menu to the left

Question

I am using Angular Material. I have successfully created a navigation bar and a dropdown menu.

It looks like this:

I would like to move the DROPDOWN to the left-hand side. Now, it appears around the 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 Back
    </md-button>
    <md-button>Item 1</md-button>
    <md-button>Item 2</md-button>
</md-toolbar>

How can the code be modified to move DROPDOWN to the left just beside the text Material NavBar?

nextt1 · Accepted Answer · 2016-04-25 06:34:12Z

3

You just need to add   in your 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 Back
</md-button>
<md-button>Item 1</md-button>
<md-button>Item 2</md-button>

Here is a working Example. http://codepen.io/next1/pen/RaYNxw

edited Apr 25, 2016 at 6:34

answered Apr 25, 2016 at 6:32

nextt1

4,0082 gold badges20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user6064424 Over a year ago

Such a simple solution, yet I got stuck for a considerable time. Genius!

nextt1 Over a year ago

always use that span element for appropriate alignment of elements.

user6064424 Over a year ago

nextt1, I tried googling to understand more about   but cannot find a good one. Do you mind providing some link with good documentation on  ?

nextt1 Over a year ago

flex is the important concept. check out the offical doc material.angularjs.org/latest/layout/children

user6064424 Over a year ago

Thanks. I thought flex was a html/css concept. Didn't realize it was a angular material concept.

|

Collectives™ on Stack Overflow

Move Angular Material Dropdown menu to the left

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related