Components: Input placeholder doesn't go above the real input

[mohitook]

Bug, feature request, or proposal:

bug

What is the expected behavior?

the input placeholder works as it has worked before, and goes above the real input when I start to type anything

What is the current behavior?

Is there anything else we should know?

It has worked a few hours ago even on my prod deployment, now without any modification on it just simply doesnt work as it should.

current versions:
"dependencies": { "@angular/animations": "^4.4.0-RC.0", "@angular/cdk": "^2.0.0-beta.10", "@angular/common": "^4.4.0-RC.0", "@angular/compiler": "^4.4.0-RC.0", "@angular/compiler-cli": "^4.4.0-RC.0", "@angular/core": "^4.4.0-RC.0", "@angular/flex-layout": "^2.0.0-beta.9", "@angular/forms": "^4.4.0-RC.0", "@angular/http": "^4.4.0-RC.0", "@angular/material": "^2.0.0-beta.10", "@angular/platform-browser": "^4.4.0-RC.0", "@angular/platform-browser-dynamic": "^4.4.0-RC.0", "@angular/platform-server": "^4.4.0-RC.0", "@angular/router": "^4.4.0-RC.0", "angular-froala-wysiwyg": "^2.7.0", "angular2-infinite-scroll": "^0.3.4", "angular2-masonry": "^0.4.0", "angular2-moment": "^1.7.0", "angular2-tinymce": "^2.1.2", "angularfire2": "^2.0.0-beta.8", "core-js": "^2.4.1", "firebase": "^3.8.0", "firebase-functions": "^0.6.3", "hammerjs": "^2.0.8", "imagesloaded": "^4.1.3", "ng-select": "^1.0.0-beta.5", "ng2-filter-pipe": "^0.1.7", "ng2-tag-input": "^1.2.2", "ngx-modal": "0.0.29", "ngx-pagination": "^3.0.0", "ngx-sharebuttons": "^3.0.0", "rxjs": "^5.0.1", "tinymce": "^4.5.5", "ts-helpers": "^1.1.1", "typescript": "^2.5.2", "zone.js": "^0.7.2" }, "devDependencies": { "@angular/cli": "^1.3.2", "@angular/compiler-cli": "^2.3.1", "@types/jasmine": "2.5.38", "@types/node": "^6.0.42", "codelyzer": "~2.0.0-beta.1", "jasmine-core": "2.5.2", "jasmine-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-remap-istanbul": "^0.2.1", "protractor": "~4.0.13", "ts-node": "1.2.1", "tslint": "^4.3.0", "typescript": "~2.0.3" }

It is really annoying, because as I said it has worked a few hours ago, and I didn't modify anyhing related to this, and now it is not working on any of my pages... please help.

It may help if someone tell what is responsible for the animation, and/or move placeholders up.

[donroyco]

Please create a minimal example via the Plunker or StackBlitz starting point and mention in your issue also which browser you are referring to.

Plunker starter (using on @master): https://goo.gl/DlHd6U
StackBlitz starter (using latest npm release): https://goo.gl/wwnhMV

[mohitook]

@donroyco this is the problem, I can't even make it look like it is in the main example on plunker or stackblitz... it would be even a big help if someone could tell me what is responsible for the placeholder moves above the real input if it gets the focus..

[donroyco]

@mohitook Just put your code into a StackBlitz or Plunker and add it here. Then we can take a look. In which browser are you seeing this?

[mohitook]

@donroyco in this case here it is what has worked a few hours ago:
https://angular-material2-issue-v3yhyw.stackblitz.io

I use this mdInput a lot of different places in my application, thats why it is really wierd that all of them just gone at once...

• I use chrome, and now tested with 'edge' but the behaviour is the same...

+info: there is really nothing changed what could effect this thing everywhere in my application... wierd
and here is a better picture about the problem: when the input gets the focus the placeholder simply keep it's place and doesn't go above

[donroyco]

What is your single input code? The StackBlitz you're referring to is not the project itself.

[mohitook]

@donroyco I can't upload the project itself because it's too big... with a lot of dependency...
the real question is, that what can cause a bug/issue like this?
this is the editor link,: https://stackblitz.com/edit/angular-material2-issue-v3yhyw

[mohitook]

maybe related:
2441
(bit it has worked for me... we should still find the problem's root)

[Dheenathayalan]

I am also facing the same issue.It was working few hours ago.I tried to set floatPlaceholder attribute of mat-form-field to 'always' as well but it doesn't works.However when it is set to 'never' the placeholder gets removed when the input element is focused.

[mohitook]

sounds as a good workaround, but could you show a code sample how/and where can I set this attribute? I really need to fix it, because basically I spent my whole day researching for the root cause...

[akilabi]

<mat-form-field floatPlaceholder="never"> <input placeholder="Test label" matInput /> </mat-form-field>
The above code snippet works in removing the placeholder on focus but it doesn't floats it.

[mohitook]

@akilabi in the meantime I've found it, it is wierd because the placeholder disappears only when I start typing, not when it gets the focus... you said it should go away as soon as it gets the focus, am 'I right?
btw you have basically saved my day! I appraciate it! 👍

[mariohmol]

Running the same issue since beta2... until now some workarounds were working.. but for the beta 11 still struggling..

what i can see until now, have to remove float to make it disappear at least.. and had to not use input-container (use instead md-form-field)

<md-form-field floatPlaceholder="never">
            <input type="text" 
            mdInput placeholder="{{ 'test' | translate }}"
             required formControlName="phone">
        </md-form-field>

[adamdport]

@petebacondarwin had a workaround that seems to get me by for now:

if you are only experiencing this because the initial setting of the values is async then you could provide "dummy values" to the form controls when you create them, so that the input directive thinks that they are not empty before the setValue finally fills them.

If I set my values to 3 for example instead of null or '', the problem seems to go away. Not ideal but maybe helpful to someone.

[mohitook]

@adamdport thanks, but I've already found it before I even created this issue... unfortunately it doesn't work for me. as I see there are ton of issues coming every day, so it won't be fixed soon, the only thing I can hope for is that there will be no new surprise bug, because I have to finish my thesis soon :)

[ianzimmerman]

I was having the same issue, but solved it by updating my theme css:

https://material.angular.io/guide/getting-started#step-4-include-a-theme

[dnbo]

I was having the same issue, but solved it by updating my theme css

Had the same problem, quickly switched back and forth between the indigo-pink theme and another and it solved my issue.

[Julo0sS]

Hi there, Idk if it helps, but I noticed that I had this line in my styles.css file :

label{ /*...*/ margin: 1.5em 0; }

This was causing the problem in my case. Removing the margin solved the display issue.

[mrsan22]

I was having the same issue with beta.12 version. Solved it by updating my theme.scss by using below command:

node-sass <input-scss-file> <output-css-file>

Reference: Check here

[mariohmol]

that worked upgrading to beta12!!

[mohitook]

Thanks everyone, and double hurray for @ianzimmerman !
I've figured out that still now I used only linked prebuild themes and since there was breaking changes in... well almost every part of this framework I think they've modified a lot in the prebuild themes too..
so basically the solution: use @import .... in your style.css instead of using the prebuild themes!

[GeorgeKnap]

I am experiencing this on first page load. But when I come back to the component, the animation works correctly.
I'm using version 6.0.1 it didn't work in 6.0.0 too.
The form is not anything special, just a simple reactive form with two form fields for login. I can share some of the code but I really don't know which part.

[michellecolin]

I'm experience the same problem, tried changing between the prebuilt themes but nothing changed
using angular 6 and angular material 6

[shriharip]

Facing same issue here https://stackblitz.com/edit/angular-fwkbbk

[inorganik]

If you are using Bootstrap I discovered it applies display: inline-block to label which messes up Material's label float.

[kithminijayawardena]

Using a pre-built theme theme solved it.
https://stackoverflow.com/a/52255505/10679323

[Pringmore]

Faced same issue while using Scss for styling instead of css. Just import one of the _pre-built_ Angular Material themes in the root styling file.
In my case it was: style.scss

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}