bug(md-input) placeholder hidden underneath input with no value #3196

benb7760 · 2017-02-19T19:32:00Z

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 · 2017-02-19T20:01:19Z

Update - it appears to be resolved by reverting:
.mat-input-placeholder-wrapper::after content from '' back to '\00a0'

crisbeto · 2017-02-19T20:17:05Z

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?

benb7760 · 2017-02-19T21:13:59Z

Update - I have disabled all custom CSS and can confirm that this still happens.

No selection

Selection

crisbeto · 2017-02-19T21:26:51Z

Hmm that's weird. What OS and browser are you using?

benb7760 · 2017-02-19T21:27:40Z

Tested in both Chrome 56, Safari 10.0.3. I have also cleared node_modules and reinstalled and continue to see the same issue

crisbeto · 2017-02-19T21:39:53Z

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?

benb7760 · 2017-02-19T21:47:16Z

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

lukaskopenec · 2017-02-20T11:43:01Z

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>

crisbeto · 2017-02-20T12:12:43Z

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 · 2017-02-20T12:24:44Z

Actually, I think I found what may be causing it. Can @lukaskopenec and @benb7760 check that your index.html has a doctype?

lukaskopenec · 2017-02-20T12:30:21Z

@crisbeto That was it! I had a doctype but with a typo. Thanks for your help!

benb7760 · 2017-02-20T16:09:33Z

@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>

naiteluo · 2017-02-21T10:43:34Z

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.

kara · 2017-02-21T20:55:26Z

Okay, it looks like this issue was solved by fixing the DOCTYPE? Will close then.

xtianus79 · 2017-02-23T14:59:16Z

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!!!

Stexxen · 2017-03-06T10:44:12Z

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.

Gallopaway · 2017-04-24T04:19:54Z

had the same problem, I didnt even have a doctype on my index page!! problem solved when i added it

prograamer · 2017-05-12T05:03:27Z

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

blievrouw · 2017-06-16T10:09:43Z

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)

mayankjoshi24 · 2017-09-01T12:21:43Z

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.

willshowell · 2017-09-01T13:51:29Z

@mayankjoshi24 can you reproduce and open a separate issue?

xtianus79 · 2017-09-01T15:01:44Z

@mayankjoshi24 is this the bug wher eyou need to have this in your index.html file?

<!DOCTYPE html>
<html>

i.e. html5

mayankjoshi24 · 2017-09-04T12:58:50Z

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.

stwalter01 · 2017-11-01T21:40:16Z

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.

bertyhell · 2017-11-18T17:34:07Z

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 { }

source: https://stackoverflow.com/a/43241908/373207

codemental · 2017-12-01T11:35:45Z

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.

rcanacci · 2017-12-12T01:49:52Z

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).

maknik · 2017-12-13T13:38:18Z

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.

rcanacci · 2017-12-13T13:46:16Z

Hey, @maknik, the issue has been re-opened here:

#8960

maknik · 2017-12-13T14:00:40Z

@rcanacci but #8960 is about hidden fields not about hidden placeholder. I'm not sure this is the same problem

rcanacci · 2017-12-13T14:05:18Z

@maknik - no problem, just a good heads up then that this issue is closed. I was advised to open a new one. Cheers!

dhananshan · 2018-04-08T17:14:28Z

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;
}

abparasar · 2018-08-13T13:39:06Z

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;
}

angular-automatic-lock-bot · 2019-09-09T10:01:59Z

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.}

crisbeto self-assigned this Feb 20, 2017

kara closed this as completed Feb 21, 2017

benb7760 mentioned this issue Feb 22, 2017

Input element with mdInput inside md-input-container does not display the placeholder when field is empty #3235

Closed

crisbeto mentioned this issue Feb 22, 2017

floatPlaceholder="auto" or any other input doesn't show placeholder text #3246

Closed

willshowell mentioned this issue Mar 10, 2017

fix(core): log warning if doctype is missing #2849

Merged

rcanacci mentioned this issue Dec 12, 2017

[FormField] Fields hidden when using non-stock theme #8960

Closed

maknik mentioned this issue Dec 13, 2017

[Input] Placeholder hidden under input #8970

Closed

alessandrojcm mentioned this issue Mar 13, 2018

When selection is empty, placeholder only reappears when clicked on custom MatSelect with multiple selection #10385

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bug(md-input) placeholder hidden underneath input with no value #3196

bug(md-input) placeholder hidden underneath input with no value #3196

benb7760 commented Feb 19, 2017 •

edited

Loading

benb7760 commented Feb 19, 2017

crisbeto commented Feb 19, 2017 •

edited

Loading

benb7760 commented Feb 19, 2017 •

edited

Loading

crisbeto commented Feb 19, 2017

benb7760 commented Feb 19, 2017 •

edited

Loading

crisbeto commented Feb 19, 2017

benb7760 commented Feb 19, 2017

lukaskopenec commented Feb 20, 2017 •

edited

Loading

crisbeto commented Feb 20, 2017

crisbeto commented Feb 20, 2017

lukaskopenec commented Feb 20, 2017

benb7760 commented Feb 20, 2017

naiteluo commented Feb 21, 2017

kara commented Feb 21, 2017

xtianus79 commented Feb 23, 2017

Stexxen commented Mar 6, 2017 •

edited

Loading

Gallopaway commented Apr 24, 2017

prograamer commented May 12, 2017 •

edited

Loading

blievrouw commented Jun 16, 2017

mayankjoshi24 commented Sep 1, 2017

willshowell commented Sep 1, 2017

xtianus79 commented Sep 1, 2017 •

edited

Loading

mayankjoshi24 commented Sep 4, 2017

stwalter01 commented Nov 1, 2017

bertyhell commented Nov 18, 2017

codemental commented Dec 1, 2017

rcanacci commented Dec 12, 2017 •

edited

Loading

maknik commented Dec 13, 2017

rcanacci commented Dec 13, 2017

maknik commented Dec 13, 2017

rcanacci commented Dec 13, 2017

dhananshan commented Apr 8, 2018

abparasar commented Aug 13, 2018 •

edited

Loading

angular-automatic-lock-bot bot commented Sep 9, 2019

bug(md-input) placeholder hidden underneath input with no value #3196

bug(md-input) placeholder hidden underneath input with no value #3196

Comments

benb7760 commented Feb 19, 2017 • edited Loading

Bug, feature request, or proposal:

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

Which versions of Angular, Material, OS, browsers are affected?

benb7760 commented Feb 19, 2017

crisbeto commented Feb 19, 2017 • edited Loading

benb7760 commented Feb 19, 2017 • edited Loading

crisbeto commented Feb 19, 2017

benb7760 commented Feb 19, 2017 • edited Loading

crisbeto commented Feb 19, 2017

benb7760 commented Feb 19, 2017

lukaskopenec commented Feb 20, 2017 • edited Loading

crisbeto commented Feb 20, 2017

crisbeto commented Feb 20, 2017

lukaskopenec commented Feb 20, 2017

benb7760 commented Feb 20, 2017

naiteluo commented Feb 21, 2017

kara commented Feb 21, 2017

xtianus79 commented Feb 23, 2017

Stexxen commented Mar 6, 2017 • edited Loading

Gallopaway commented Apr 24, 2017

prograamer commented May 12, 2017 • edited Loading

blievrouw commented Jun 16, 2017

mayankjoshi24 commented Sep 1, 2017

willshowell commented Sep 1, 2017

xtianus79 commented Sep 1, 2017 • edited Loading

mayankjoshi24 commented Sep 4, 2017

stwalter01 commented Nov 1, 2017

bertyhell commented Nov 18, 2017

codemental commented Dec 1, 2017

rcanacci commented Dec 12, 2017 • edited Loading

maknik commented Dec 13, 2017

rcanacci commented Dec 13, 2017

maknik commented Dec 13, 2017

rcanacci commented Dec 13, 2017

dhananshan commented Apr 8, 2018

abparasar commented Aug 13, 2018 • edited Loading

angular-automatic-lock-bot bot commented Sep 9, 2019

benb7760 commented Feb 19, 2017 •

edited

Loading

crisbeto commented Feb 19, 2017 •

edited

Loading

benb7760 commented Feb 19, 2017 •

edited

Loading

benb7760 commented Feb 19, 2017 •

edited

Loading

lukaskopenec commented Feb 20, 2017 •

edited

Loading

Stexxen commented Mar 6, 2017 •

edited

Loading

prograamer commented May 12, 2017 •

edited

Loading

xtianus79 commented Sep 1, 2017 •

edited

Loading

rcanacci commented Dec 12, 2017 •

edited

Loading

abparasar commented Aug 13, 2018 •

edited

Loading