how to align text input in Angular-Material tool bar?

Question

I'm having a problem when trying to align input elements with buttons on an angular material toolbar.

Here is a code pen: http://codepen.io/curtwagner1984/pen/amgdXj

Here is my html:

<md-toolbar class="md-hue-1" layout-align="start center" style="min-height:15px; height: 50px" ng-show="$ctrl.showSearch">
    <div class="md-toolbar-tools">
        <md-button ng-click="$ctrl.showSearch = !$ctrl.showSearch">
            back
        </md-button>
        <md-input-container flex="">
            <input ng-model="searchInput" placeholder="Search here">
        </md-input-container>
        <md-input-container>
            <md-select ng-model="$ctrl.test">
                <md-option value="Option 1 Not Align">Option 1</md-option>
                <md-option value="Option 2 Not Align">Option 2</md-option>
            </md-select>
        </md-input-container>

        <md-button ng-click="$ctrl.showSearch = !$ctrl.showSearch">
            Search
        </md-button>
        <md-button ng-click="showListBottomSheet($event)">
            settings
        </md-button>
    </div>

</md-toolbar>

The CSS is the default Angular Material CSS file. Would be glad if someone could point me to how to achieve alignment here.

I also looked into this: http://blog.sodhanalibrary.com/2015/07/header-design-with-angularjs-material-ui.html#.WBS-Y-B96Uk But didn't find a good solution, when I try their code, my input container in the toolbar is still not aligned.

Answer 1

Add this class for all your elements that you want to align.

.align-items {
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

Answer 2

This is one way of doing it - CodePen

The things to note are:

• Remove class="md-toolbar-tools"
• Put md-select within an md-container
• Enclose the two md-input-container within a div

This uses the Angular Material way of doing things and doesn't need extra CSS.

Edit 1: If you want the height of the md-toolbar to be 50px you can easily set its style be so but the input label will go off the screen.

Edit 2: If you want the 50px height without the label going off the screen you can add the md-no-float attribute to the md-input-container .

Markup

<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak="" class="autocompletedemoBasicUsage" ng-app="MyApp">

  <md-toolbar class="md-hue-1" ng-show="true">
    <div layout="row" layout-align="start center">
      <md-button ng-click="$ctrl.showSearch = !$ctrl.showSearch">
        back
      </md-button>
      <div layout="row" flex>
        <md-input-container flex>
          <input ng-model="searchInput" placeholder="Search here">
        </md-input-container>
        <md-input-container flex>
          <md-select ng-model="$ctrl.test">
            <md-option value="Option 1 Not Align">Option 1</md-option>
            <md-option value="Option 2 Not Align">Option 2</md-option>
          </md-select>
        </md-input-container>
      </div>
      <md-button ng-click="$ctrl.showSearch = !$ctrl.showSearch">
        Search
      </md-button>
      <md-button ng-click="showListBottomSheet($event)">
        settings
      </md-button>
    </div>

  </md-toolbar>
</div>