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

LuizAsFight · Accepted Answer · 2017-05-25 21:46:00Z

5

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>

answered May 25, 2017 at 21:46

LuizAsFight

2523 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kuhnroyal · Accepted Answer · 2016-12-18 15:01:03Z

1

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

answered Dec 18, 2016 at 15:01

kuhnroyal

7,5831 gold badge39 silver badges49 bronze badges

1 Comment

Pedro A Over a year ago

Almost perfect, thanks. I've added an answer with a minor improvement that was necessary to me.

Pedro A · Accepted Answer · 2018-12-18 12:40:37Z

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.

LorenzoBerti · Accepted Answer · 2016-12-12 15:21:49Z

0

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>

answered Dec 12, 2016 at 15:21

LorenzoBerti

6,98410 gold badges53 silver badges93 bronze badges

1 Comment

Larsen Over a year ago

it's not working on md-datepicker, md-autocomplete and md-select

Tundzhel Mert · Accepted Answer · 2017-02-02 15:28:46Z

0

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

answered Feb 2, 2017 at 15:28

Tundzhel Mert

1085 bronze badges

Comments

Tomino · Accepted Answer · 2017-04-06 08:36:02Z

0

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>

answered Apr 6, 2017 at 8:36

Tomino

6,3096 gold badges43 silver badges54 bronze badges

Comments

returnvoid · Accepted Answer · 2019-02-26 21:05:06Z

0

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

answered Feb 26, 2019 at 21:05

returnvoid

4341 gold badge7 silver badges20 bronze badges

Collectives™ on Stack Overflow

Angular material input labels always floating for any input type

7 Answers 7

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related