...

View Full Version : Stretch to fit inputs



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

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.

subhailc
07-19-2006, 02:26 PM
input.select();
input.style.width=input.createTextRange().boundingWidth;

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).

Kor
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">

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

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum