How to display text without truncation in <input> tag, which is created by a framework

Question

I am using Angular Material and there is this form that has a auto-complete field, for which I am having md-autocomplete which uses a

<input type = "text" />

internally to render the text field. I am having a problem with this. Whenever the text is longer than the width of the field, I want it to wrap, so that it is not truncated, and shown in the next line.

But with <input> there is no way to style so that overflow text is displayed in the next line(I know textarea fits my requirement, but md-autocomplete uses input).

So the question is how can I display the text without the truncation. Any suggestions would do. Please help!

Answer 1

From the Doc link:

• md-search-text-change expression is fired when user change the text
• md-selected-item-change expression is fired when user select an item

My suggestion is to have your md-autocomplete hidden via CSS and hook these expression to update a textarea which the user will see and interact.

Sorry no working code for now. But I could create a plunker if you want. I have built similar for ui-autocomplete. Two input one with ng-model="data.uiModel and ng-model=data.actualModel"

Answer 2

I don't think it is possible with input type="text", but as a work around you can use title attribute in input and have same content as value. for example

<input type="text" title="something that exceeds the width of the box" value="something that exceeds the width of the box">

this will make sure your content will be visible completely on hover.