Curtwagner1984 Curtwagner1984 - 1 year ago 172
AngularJS Question

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

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

Here is a code pen:

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">
<md-input-container flex="">
<input ng-model="searchInput" placeholder="Search here">
<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-button ng-click="$ctrl.showSearch = !$ctrl.showSearch">
<md-button ng-click="showListBottomSheet($event)">


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: But didn't find a good solution, when I try their code, my input container in the toolbar is still not aligned.

Med Med
Answer Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download