Angular material input labels always floating for any input type

Question

I need to display a fixed (no animation) floating label on every md-input-container containing either md-input, md-select, md-datepicker or md-autocomplete. I actually managed to have it work on md-input by adding class="md-input-has-placeholder" on md-input-container, but it's not working on any other kinds of input.

<md-input-container class="md-input-has-placeholder">
    <label style="font-size:15px;">Name</label>
    <input type="text" name="name" ng-model="user.name">
</md-input-container>

result expected example

Answer 1

you can just add placeholder="" to your field.. i've tested with input and textarea, don't know if it works with all components.. hope it helps

<md-input-container>
        <label>Text (always floating)</label>
        <textarea ng-model="ngModel" rows="1" md-maxlength="150" placeholder=""></textarea>
    </md-input-container>

Answer 2

You have to override some CSS styles from angular-material. This should get you close to what you are trying to achieve.

md-input-container label {
   -webkit-transform: translate3d(0,6px,0) scale(.75) !important;
   transform: translate3d(0,6px,0) scale(.75) !important;
   -webkit-transition: width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1) !important;
   transition: width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1) !important;
   transition: transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1) !important;
   transition: transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1) !important;
   opacity: 1 !important;
   top: auto !important;
}

md-input-container .md-select-placeholder > span:not(.md-select-icon) {
  color: transparent;
}

http://codepen.io/kuhnroyal/pen/BQMNyy