Angular Material Md-toolbar Input

Question

Is there a way to add md-input-container within the md-toolbar like this?

Answer 1

It's pretty straightforward. Simply add the md-input-container into the toolbar.

<md-toolbar class="myCustomClass">
  <div class="md-toolbar-tools">
    <md-input-container class="md-block" flex-gt-sm>
      <label>Search for item</label> 
      <input ng-model="searchPhrase" name="searchPhrase">
    </md-input-container>
  </div>
</md-toolbar>

You may need to adjust the vertical alignment if the search box sits high. You can do this by adding the following css:

.myCustomClass md-input-container .md-errors-spacer{
  min-height: 0px !important;
}

Obviously the correct way would be to create a custom class for the input in the toolbar and apply the above style so you don't end up overriding the default styles of other input tags.