sciencefyll sciencefyll - 5 months ago 87
AngularJS Question

angular material md-input-container won't center vertically

I'm using angular material for designing my project. Now I want an input for searching in my toolbar, just like youtube.

My code:

<md-list flex-offset="10">
<md-list-item layout-align="start center">
<md-input-container md-no-float flex>
<input type="text" placeholder="Search" flex>
</md-input-container>
<md-button> test </md-button>
</md-list-item>
</md-list>


The toolbar tags before my md-list looks like this:

<md-toolbar layout="row" flex style="max-height: 60px;">
<div class="md-toolbar-tools">


What I've tried:


  • Wrapping it inside a normal div and setting layout-align to start, center.

  • Using a form tag to wrap the input container.



Problem:

The input group won't center vertically, and this is what I'm after. Every other directive I've tried centers perfectly like the md-button.

Is this a bug or am I doing something wrong?

Edit (Added picture comparing, md-input-container, input, md-button):

enter image description here

Answer

Did You Tried

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