Dynamic width of a text input field in a form

[NullBock]

Hi,

I'm trying to create a form with a text-input (not textarea) that
expands to the size available, using CSS. I thought that a simple
display:block would work:

<form>
<div>
<input type="text" style="display: block">
</div>
</form>

The result is exactly the same as if I hadn't added the style
attribute. This works with other inline styles, say <a>, why not with
<input>? I've searched the web for possible reasons, without turning
up anything.

Just so you know, the text field is for inputting long URLs, often far
longer than the width of the browser. Thus, setting a static width
isn't necessary to indicate the expected length of an entry. I've
considered using textarea, but have ruled this out as Mozilla only
wraps on whitespace. It's for a URL shortening application I'm working
on--you can find it here: http://linkfrog.net

Thanks,
Walter Gildersleeve
Freiburg, Germany

[Jukka K. Korpela]

NullBock wrote:

I'm trying to create a form with a text-input (not textarea) that
expands to the size available, using CSS.
Then you should have posted to c.i.w.a.stylesheets, right? I'm setting
followups there and exceptionally quoting your entire message for that
reason.
I thought that a simple display:block would work:
That's a natural idea, but on second thought, it should not work. Fields
must be expected to have default widths, and the display property should
not disturb that.
<form>
<div>
<input type="text" style="display: block">
</div>
</form>

The result is exactly the same as if I hadn't added the style
attribute.
It's the same even if you add width: auto, which is somewhat odd.
This works with other inline styles, say <a>, why not with
<input>? I've searched the web for possible reasons, without turning
up anything.
<a> elements have no default width set, but <input type="text"> elements
have, either via an explicit size="..." attribute or with that attribute
defaulted (to 20, typically).

But setting width: 100% helps (even without display: block).

ObHTML: I would still use size="..." with a relatively large value (say
42), if a wide field is preferred, according to the principle that your
style sheet might or might not be applied.
Just so you know, the text field is for inputting long URLs, often far
longer than the width of the browser. Thus, setting a static width
isn't necessary to indicate the expected length of an entry. I've
considered using textarea, but have ruled this out as Mozilla only
wraps on whitespace. It's for a URL shortening application I'm working
on--you can find it here: http://linkfrog.net

Thanks,
Walter Gildersleeve
Freiburg, Germany

Using <input type="text"> rather than <textarea> looks right, despite
the problems. A URL cannot logically contain a line break, so physical
line breaks should be avoided too.