View Full Version : Stretch to fit inputs

DHTML Kitchen
07-19-2006, 01:30 AM

Do you know how gmail's textarea stretches to accomodate text?

I want my inputs to behave like that.

I tried using css:
fit: fill;

But that didn't work. Not even in Mozilla.

How do I do this?

In other words

<input type="text" name="name_first">
<input type="text" name="name_middle">
<input type="text" name="name_last">

I want the fields to line up like this.

+---------+ +---+ +-------+
| Garrett | | S | | Smith |
+---------+ +---+ +-------+

and if the user changes "name_middle" to "Sean", then the middle field should expand.

+---------+ +------+ +-------+
| Garrett | | Sean | | Smith |
+---------+ +------+ +-------+

I think I'll need to know the width of the input's value. I think that's actually possible in IE's Range.

07-19-2006, 02:26 PM

DHTML Kitchen
07-19-2006, 08:55 PM
Well, I ended up using the span.

The range's boundingWidth is only going to work in IE, AFAIK. I did not test boundingWidth in Mozilla, but it is not documented and non-standard, so I assume it is not supported.

I'm going to try using a span, then setting the width of the input to the offsetWidth of the span.

It sounds like a pain, but I need the span element to have the same value as the input (as part of the functional spec).

07-24-2006, 12:29 PM
What about (not perfect but acceptable):

<input type="text" size="1" onkeyup="this.size=this.value.length>0?this.value.length:1">

07-27-2006, 11:33 PM
This works although in IE only.

<input type="text" size="3" style="overflow:visible" />