CODEWITHSUNDEEP
htmlcssangularjsinputangular-material
Larsen
Larsen

Reputation: 43

Angular material input labels always floating for any input type

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

Upvotes: 3

Views: 11263

Answers (7)

returnvoid
returnvoid

Reputation: 434

You can check this directive out https://material.angularjs.org/latest/api/directive/mdInputContainer#attributes md-no-float. Make sure you are using placeholder in the input instead of an actual element

Upvotes: 0

Pedro A
Pedro A

Reputation: 4323

This is a slight improvement over @kuhnroyal's answer (upvote it!), accounting for ng-required possibly present in the inputs, and providing a class so that you can apply this style only when you want it:

Add the following CSS to your page:

md-input-container.floating-label-always 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.floating-label-always .md-select-placeholder > span:not(.md-select-icon) {
  color: transparent;
}
md-input-container.floating-label-always .md-select-placeholder > span:not(.md-select-icon):after {
  content: none !important;
}

To apply it, add the floating-label-always class to your md-input-container.

Upvotes: 1

LuizAsFight
LuizAsFight

Reputation: 242

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>

Upvotes: 4

Tomino
Tomino

Reputation: 6249

For @angular/material you can set property floatPlaceholder="always" on <md-input-container> tag. This Works fine since 2.0.0-beta.2. I know that it's not related to your question, but many people will search for this problem and find your question (as I did).

<md-input-container floatPlaceholder="always">
   <input mdInput type="text" id="username" formControlName="Username"
    class="form-control" placeholder="Login" required>
</md-input-container>

Upvotes: 0

Tundzhel Mert
Tundzhel Mert

Reputation: 108

If you don't mind having the labels colored, you can always add md-input-focused class to the md-input-container.

Upvotes: 0

kuhnroyal
kuhnroyal

Reputation: 7553

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

Upvotes: 1

LorenzoBerti
LorenzoBerti

Reputation: 6974

Try to add class="active" to label.

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

Upvotes: 0

Related Questions