Components: bug(md-input) placeholder hidden underneath input with no value
Bug, feature request, or proposal:
Bug
What is the expected behavior?
With no value provided, the placeholder should sit in front of the input element
What is the current behavior?
The placeholder is hidden behind the input element. Selecting the element triggers the ordinary animation, moving the placeholder above the input.
What are the steps to reproduce?
http://plnkr.co/edit/VV9wDNx7FIK0gVDWsMU6?p=preview
I was annoyingly unable to reproduce on Plunker. The code in that Plunker does not work on my machine. I am using the material builds repo;
"@angular/material": "git+https://github.com/angular/material2-builds.git#8f246c0"
That exact commit is where the bug first appears for me. I have also tried against the main repo at beta.2 and the same issue occurs
-I can't see any specific CSS being used within my project- I have since removed all of my app content and this still happens with no custom CSS
Which versions of Angular, Material, OS, browsers are affected?
Chrome 56, Safari 10.0.3 (untested elsewhere). Material 2.0.0-beta.2 and material-builds #8f246c0
benb7760
All 34 comments
Update - it appears to be resolved by reverting:
.mat-input-placeholder-wrapper::after content from '' back to '\00a0'
benb7760
on 19 Feb 2017
The issue with reverting the content back to \00a0 is that the browser can end up rendering it in some cases (AFAIK Chrome on Linux is one of them).
Also, if you're unable to reproduce it in a Plunkr, can you post a screenshot of what it looks like?
crisbeto
on 19 Feb 2017
Update - I have disabled all custom CSS and can confirm that this still happens.
No selection
Selection
benb7760
on 19 Feb 2017
Hmm that's weird. What OS and browser are you using?
crisbeto
on 19 Feb 2017
Tested in both Chrome 56, Safari 10.0.3. I have also cleared node_modules and reinstalled and continue to see the same issue
benb7760
on 19 Feb 2017
I couldn't reproduce it with neither of those browsers. Are you sure there isn't anything else in your app that could be messing with it?
crisbeto
on 19 Feb 2017
I can't see anything that could be doing it. I've stripped my app back completely so that the core view is just this repro, and removed all CSS, still happening
benb7760
on 19 Feb 2017
I have the same issue Chrome 56, Windows 10. After playing with it for a while the problem seems to be related to position: absolute from .mat-input-placeholder.
I can see the label in the plunker above though, so it's a bit weird. However, the labels were fine in beta1. Can you see any problem with this code?
<form (ngSubmit)="logIn()" novalidate #loginForm="ngForm">
<md-input-container>
<input mdInput type="text" md-input placeholder="Username" [(ngModel)]="username" name="username" required>
</md-input-container>
</form>
lukaskopenec
on 20 Feb 2017
We did some changes to the .mat-input-placeholder in beta.2 in order to prevent it from overflowing in IE 11. Still, my best guess is that there's something else influencing it, because I can't reproduce it in a Plunkr or against our development app.
crisbeto
on 20 Feb 2017
Actually, I think I found what may be causing it. Can @lukaskopenec and @benb7760 check that your index.html has a doctype?
crisbeto
on 20 Feb 2017
@crisbeto That was it! I had a doctype but with a typo. Thanks for your help!
lukaskopenec
on 20 Feb 2017
@crisbeto Yep that has solved it here too. My DOCTYPE had some extra stuff in it which I have since removed. For reference, it looked like this;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
and I have changed it to
<!DOCTYPE html>
benb7760
on 20 Feb 2017
I have the same issue. In my case, i forgot to add <!DOCTYPE html> in front of the html tag, after i add the correct doctype, problem solved.
naiteluo
on 21 Feb 2017
Okay, it looks like this issue was solved by fixing the DOCTYPE? Will close then.
kara
on 21 Feb 2017
can i just make the notation here that quickstart... lol, which I started my projects from must have not had it in there. just sayin!!!
xtianus79
on 23 Feb 2017
I had these symptoms, but it was unrelated to the DOCTYPE.
Simply the use of a prebuilt dark theme, purple-green or pink-bluegrey will do
and not putting the form inside a container i.e. a md-card
See http://plnkr.co/edit/fElo3SpEtDA5Fy4oLoHb?p=preview for an example
Enclosing the form within a container or adding the class 'mat-app-background' to the <body> resolved it.
Stexxen
on 6 Mar 2017
had the same problem, I didnt even have a doctype on my index page!! problem solved when i added it
Gallopaway
on 24 Apr 2017
The same problem on Firefox 53.0.2
placeholder is shown when property of css class is disabled
.mat-input-placeholder-wrapper - overflow: hidden
As written in previous post by @Gallopaway - works properly after adding doctype
prograamer
on 12 May 2017
Like @Stexxen, I also experience these symtoms unrelated to the doctype. Without a wrapper like md-card, the input field doesn't have the required behaviour with all themes:
(purple-green vs indigo-pink)
blievrouw
on 16 Jun 2017
Its happening with me too. Quite irritated by this bug or tweak , whatever it may be!
If someone conquered in removing this bug ,please help.
mayankjoshi24
on 1 Sep 2017
@mayankjoshi24 can you reproduce and open a separate issue?
willshowell
on 1 Sep 2017
@mayankjoshi24 is this the bug wher eyou need to have this in your index.html file?
<!DOCTYPE html>
<html>
i.e. html5
xtianus79
on 1 Sep 2017
Below are the 2 images of my code and the result of that code in the browser.
When i reload my login page, only the Sub-domain placeholder is visible, others are visible once you click on them.
mayankjoshi24
on 4 Sep 2017
I have the same problem, I am trying to clear a reactive form and simple rebuild the form, It clears the fields but anything that had a value is only an underline. If I click in it and then click away the placeholder returns as it should.
stwalter01
on 1 Nov 2017
I had the same issue unrelated to the html doctype
The problem was solved by importing the animation module.
@NgModule({
declarations: [
...
],
imports: [
BrowserAnimationsModule,
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
bertyhell
on 18 Nov 2017
I have the exact same situation as @stwalter01. I have a form inside a mat-card-content like this:
<mat-card-content>
<form [formGroup]="formGroup">
...
</form>
</mat-card-content>
If the form shows some data and afterwards I clear it with an empty object like this:
let location: Location = new Location();
this.formGroup = new FormGroup({
id: new FormControl(location.id),
created: new FormControl(location.created),
name: new FormControl(location.name, Validators.required),
...
the form looks like this:
instead of this:
If I refresh the app (CTRL-F5) the form appears correctly. This problem only appears if I navigate to it from somewhere else.
I have the _doctype_ declaration and the _BrowserAnimationsModule_ import.
OS: Linux Ubuntu 17.10
Browsers: Latest Firefox Quantum: Developer Edition and latest Chrome.
codemental
on 1 Dec 2017
I am having the same issue and it is not the result of the missing DOCTYPE or the BrowserAnimationModule not being present.
Issue description
If I use one of the stock angular material themes such as:
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
... my inputs appear as follows...
... as soon as I try to implement a custom theme, here is what happens:
... as you can see, its basically the same the others who are experiencing the same issue... the matInputs are there but invisible.
Clicking into them does begin the animation and properly display them (one at a time).
rcanacci
on 12 Dec 2017
I have the same problem as @stwalter01
After .patchValue() on react form, labels still have class ".mat-empty .mat-form-field-empty". Then, when I focus input field ".mat-empty .mat-form-field-empty" class is removed from the label. After clear all form (by [FormGroup].reset()), placeholder from previously focued field dissapear, because this field doesn't have ".mat-empty" class anymore.
I notice this only after .patchValue() on form. When I fill form manually and then do .reset(), labels are properly chcecked and ".mat-empty" class is present.
maknik
on 13 Dec 2017
Hey, @maknik, the issue has been re-opened here:
rcanacci
on 13 Dec 2017
@rcanacci but #8960 is about hidden fields not about hidden placeholder. I'm not sure this is the same problem
maknik
on 13 Dec 2017
@maknik - no problem, just a good heads up then that this issue is closed. I was advised to open a new one. Cheers!
rcanacci
on 13 Dec 2017
easy fix could be applying the below in your global CSS file. This will overwrite the
mat-form-field-placeholder
.mat-form-field-placeholder {
display:block !important;
}
dhananshan
on 8 Apr 2018
This may happen when your padding properties are messing with the padding of the placeholder text.
Try this if it helps:
.mat-form-field-placeholder {
padding: 0px !important;
}
abparasar
on 13 Aug 2018
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._
![angular-automatic-lock-bot[bot] picture](https://avatars.githubusercontent.com/in/40213?v=4&s=40)
angular-automatic-lock-bot[bot]
on 9 Sep 2019
Related issues
michaelb-01
路
3Comments
constantinlucian
路
3Comments
MurhafSousli
路
3Comments
RoxKilly
路
3Comments
alanpurple
路
3Comments
Most helpful comment
Actually, I think I found what may be causing it. Can @lukaskopenec and @benb7760 check that your index.html has a doctype?