Skin Deep - Fathoming beauty through life, code and design on the web. » Blog Archive

January 10, 2007

Input fields that resize themselves?

With multiline input fields text is word-wrapped and a vertical scrollbar appears if the allotted space is not enough, but when you outgrow the width of a single-line text input no horizontal scrollbar appears to help you out - at least, not in any browser I’m familiar with. Does that seem right to you?

I suggest something like this:

&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;

Pretty cool, but I noticed text seems to fall off to the left when the string gets longer, and before it has reached it’s maximum character containment (width wise). Not sure I like that part. It should keep the characters visible until it needs to start pushing them off to the left to make room for new characters

And overall, I don’t see much use for it. Just a nifty effect.

Comment by Craige — January 10, 2007 @ 9:02 pm

No doubt. Perhaps I should have made it more clear that the example was just a proof-of-concept and not a usable snippet. I do think there are certain instances that call for such an effect, but I certainly do not advocate using it all over the place.

PS: If anyone does decide to implement such an effect for their application, would you care to post the code? :)

Comment by Logan — January 10, 2007 @ 11:34 pm

Seems to work in Opera 9.1 too. Seems to work better in Opera (the text doesn’t fall off the left side). However, if you hold down a key the window won’t resize until you let up and then press another key. Nice effect though.

Comment by Ralthor — January 11, 2007 @ 10:19 am

Ralthor: That could be corrected by executing setWidth onkeyup.

Glad to hear it works in Opera.

Comment by Logan — January 11, 2007 @ 11:30 am