Material: Cannot have a label and placeholder in ng-input-container

Created on 3 Sep 2015  路  2Comments  路  Source: angular/material

Labels clobber placeholders when md-input-container has the md-no-float attribute set. Instead of the label should not be clobbering the placeholder, the label should remain in label position.

angular-material-placeholder-label-bug

See demo: http://codepen.io/anon/pen/RWNVJz

HTML:

<div ng-controller="DemoCtrl" layout="column" class="inputdemoIcons" ng-app="MyApp">
  <br>
  <md-content layout-padding="" class="autoScroll">
    <md-input-container md-no-float>
      <label>Name</label>
      <input ng-model="user.name" type="text" placeholder="Johnny Appleseed">
    </md-input-container>
  </md-content>
</div>

JavaScript:

  .module('MyApp')
  .controller('DemoCtrl', function($scope) {
    $scope.user = {
      name: '',

    };
  });
merge ready

Most helpful comment

Related to #1427.

After discussion with the team, we are planning to allow support for both placeholders and labels within an <md-input-container>. If we see both, we will automatically apply the md-no-float attribute and ensure that the label always stays in the "elevated" position above the input component.

All 2 comments

Related to #1427.

After discussion with the team, we are planning to allow support for both placeholders and labels within an <md-input-container>. If we see both, we will automatically apply the md-no-float attribute and ensure that the label always stays in the "elevated" position above the input component.

You can manually set the class on the label to md-no-float as a work around for now http://codepen.io/anon/pen/QjypdO

Was this page helpful?
0 / 5 - 0 ratings