md-input-container label and placeholder bug

[ilanbiala]

When you have markup like this:

<md-input-container>
        <label>Email</label>
        <input type="email" placeholder="johnny.appleseed@gmail.com" required="required" autofocus="autofocus" ng-model="email">
</md-input-container>

You end up with

and

The label covers the placeholder. What should be done about this?

[ajoslin]

Thanks. The input's placeholder will now animate in when the input is focused and does not have a value.

[ajoslin]

Check out the 'First Name' input: https://material.angularjs.org/#/demo/material.components.input

[ilanbiala]

@ajoslin quick fix, nice. It would be awesome to include this in 0.7.1. Are you guys open to docs suggestions?

[ajoslin]

More open than you know. @marcysutton is working on a redesign now to make them more usable.

[marcysutton]

Totally open to docs suggestions, especially for the API and demos. 👍

[ilanbiala]

@marcysutton for the input docs page, I would make it less of a general page and more like "Here's what the placeholder attribute usage looks like" with a demo and then the code after. Have much more specific examples helps understand how each piece works.

[yinhm]

I have noticed this break the peace with Angular UI Bootstrap.

I will migrate to angular-material in the end, but right now there are features have not been implemented, eg: typeahead.

          <form class="navbar-form navbar-right" role="search" ng-controller="SearchController" ng-submit="submit()">
        <div class="row">
          <div class="col-lg-12">
        <div class="input-group">
                  <input type="text"
                         class="form-control" 
                         placeholder="Search symbol..."
                         name="q"
                         autocomplete="off"
                         spellcheck="false"
                         ng-model="selected" 
                         typeahead="symbol for symbol in symbols | filter:$viewValue | limitTo:8"
                         typeahead-on-select="submit($item)"
                         />
          <span class="input-group-btn">
                    <button class="btn btn-default" type="submit">Search</button>
                  </span>
                </div>
              </div>
            </div>
          </form>

[ghost]

nice fix. I upgraded to master and this works like a charm.

[vovafeldman]

I'm using angular 1.4.4 and angular-material 0.11 and still have the issue. Here's the HTML:

        <md-input-container flex>
            <label>Email address</label>
            <input type="email"
                   ng-model="addresses[p.id]"
                   ng-model-options="{ updateOn: 'blur' }"
                   placeholder="{{ p.email }}" />
        </md-input-container>

That's on focus:

That's without focus:

[jayj]

@vovafeldman What if you use md-placeholder instead of placeholder. Does that change anything?

[vovafeldman]

md-placeholder doesn't seem to work at all:

[topherfangio]

@vovafeldman This should be fixed by #4623. Can you try again with the latest master code?

Also, we updated the inputs demo so that the Postal Code input uses both a label and placeholder as an example.

[vovafeldman]

Where can I find the concatenated master file?

[topherfangio]

• Angular Material HEAD
• Bower Install - https://github.com/angular/bower-material/blob/master/angular-material.js
• Bower Install - https://github.com/angular/bower-material/blob/master/angular-material.css
• RAWGIT - https://rawgit.com/angular/bower-material/master/angular-material.js
• RAWGIT - https://rawgit.com/angular/bower-material/master/angular-material.css

[vovafeldman]

Indeed - it works with the master! I guess the fix isn't merged to 0.11.

[topherfangio]

@vovafeldman Indeed, the fix was pretty recent. Should be available in 0.11.1 which should be landing soon.

[imVinayPandya]

@topherfangio @kara guys please look at this placeholder issue.

angular/components#2661 (comment)