Material: chips: placeholder is cut off

[oliversalzburg]

Bug, enhancement request, or proposal:

When entering a placeholder for the mdChips component, the placeholder text is cut off prematurely.

Even though there is visually still a lot of space left, the text is cut off.

CodePen and steps to reproduce the issue:

CodePen Demo which demonstrates the issue:

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

Detailed Reproduction Steps:

1. The issue should be apparent instantly.

What is the expected behavior?

The text should fill the entire remaining space.

What is the current behavior?

The text is cut off prematurely.

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

Seeing more of the placeholder text will help users because they get information that was previously needlessly hidden. It will also help developers because they will have an easier time getting relevant placeholder information at that location.

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

• AngularJS: 1.6.7
• AngularJS Material: 1.1.9
• OS: Windows 10
• Browsers: Chrome

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

I played around a bit with this approach. It looks good, but I don't know if it's the right way to go. Please let me know. I'd happily open a PR.

md-chips md-chips-wrap.md-chips {
  display: flex;
  flex-wrap: wrap;
}
md-chips .md-chip-input-container {
  flex-grow: 1;
}
md-chips .md-chip-input-container input {
  width: 100%;
}

CodePen: https://codepen.io/anon/pen/YLLWGz

[norkunas]

Try to add many chips, they don't go to the next line now

[oliversalzburg]

Sorry, the CodePen was missing the flex-wrap: wrap;. It should work now.

[Splaktar]

https://github.com/angular/material/issues/10630 is already open for this issue. I know it's a significant problem and it is being worked on.