components: Input placeholder doesn't go above the real input
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.
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 8
- Comments: 27 (3 by maintainers)
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
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.1it didn’t work in6.0.0too. 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.I’m experience the same problem, tried changing between the prebuilt themes but nothing changed using angular 6 and angular material 6
<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.Using a pre-built theme theme solved it. https://stackoverflow.com/a/52255505/10679323
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.
Had the same problem, quickly switched back and forth between the
indigo-pinktheme and another and it solved my issue.