2

I have an md-autocomplete with ng-messages inside of it:

<md-autocomplete flex required="required"
     md-input-name="player"
     md-input-minlength="0"
     md-autoselect="true"
     md-select-on-match="true"
     md-selected-item="item.player"
     md-item-text="player.name"
     md-search-text="playerSearchText"
     md-items="player in filterPlayerItems(playerSearchText)"
     md-no-cache="true"
     md-floating-label="Select Player">

     <md-item-template>
          <span>{{player.name}}</span>
     </md-item-template>
     <div ng-messages="form.player.$error" class="md-block">
         <div ng-message="required">This is required.</div>
     </div>
</md-autocomplete>

The md-autocomplete is inside a form, and everything works well, besides the fact that the error message is overlapping the input field and the label:

enter image description here

When checking the DOM I found that inside the <md-autocomple-wrap> there is a <md-input-container> with a flex class: enter image description here

and if I remove that class the message goes down to its proper place: enter image description here

I can see the md-autocomplete example on angular-material demo is working well and I am following their example. What am I missing here?

Community
  • 1
  • 1
OzW
  • 848
  • 1
  • 11
  • 24
  • I've stripped down the demo version and can't replicate your problem - http://codepen.io/camden-kid/pen/kXyZgB. Could you fork it and put in your markup and code to replicate the problem? – camden_kid Jul 01 '16 at 08:58

0 Answers0