feat(chips): support use within md-input-container

[bunjiboys]

Bug, feature request, or proposal:

Labels for md-chips do not float correctly when readonly="true" when md-chips is inside an md-input-container

What is the expected behavior?

Labels should float correctly to above the chips

What is the current behavior?

Label is cutting into the chips

CodePen and steps to reproduce the issue:

https://codepen.io/anon/pen/OvJOGM

What is the use-case or motivation for changing an existing behavior?

Current behavior makes it unusable in the current state with md-input-containers

Which versions of AngularJS, Material, OS, and browsers are affected?

AngularJS 1.6.9 Angular Material 1.1.7

Windows Chrome 64.0.3282.186 Windows Internet Explorer 11.2007.14393.0 Windows Firefox Quantum OSX Chrome 64.0.3282.186 OSX Safari 11.0.3 (13604.5.6)

Is there anything else we should know? Stack Traces, Screenshots, etc.

Screenshot showing the issue, but can also be seen in the code-pen linked above

[Splaktar]

I was able to reproduce this and that certainly isn't the look that we're going for. Thank you for submitting this issue!

[fsmeier]

But are md-chips made for usage inside md-input-container? We had some comments about this in https://github.com/angular/material/pull/11125#issuecomment-366948376 .

In my opinion there is one question: should the md-input-container be a wrapper for the html input element or for elements which are rly requesting user-input?

[Splaktar]

@IMM0rtalis that's a good point!

@bunjiboys so the first piece of information here is that md-chips is not supported within md-input-container. However, it's something that we have been discussing. As shown in the demos, you can put an input or a md-autocomplete within md-chips, but we don't currently support any integration between md-input-container and md-chips.

[tysonbickelmann]

I solved this in another way I added a class to the md-input-container if there was any length on the md-chips ng-model then added css to match the following css but with my new class

CSS CLASS YOU NEED TO COPY CSS FOR md-input-container.md-input-focused label:not(.md-no-float), md-input-container.md-input-has-placeholder label:not(.md-no-float), md-input-container.md-input-has-value label:not(.md-no-float) { -webkit-transform: translate3d(0,6px,0) scale(.75); transform: translate3d(0,6px,0) scale(.75); transition: width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1); transition: transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1); transition: transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1); }

HTML I have an array so length works you may have an object so you would need to do something like Object.keys(ng-model).length ng-model being whatever your model is I.E. user.contacts <md-input-container ng-class="{'has-chips': user.contacts.length}"

CSS I ADDED md-input-container.has-chips label:not(.md-no-float), md-input-container.md-input-has-placeholder.has-chips label:not(.md-no-float) { -webkit-transform: translate3d(0,6px,0) scale(.75); transform: translate3d(0,6px,0) scale(.75); transition: width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1); transition: transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1); transition: transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1); }

This basically keeps the label in the right position if there are chips