Do you have a question? Post it now! No Registration Necessary. Now with pictures!
- Posted on
November 8, 2005, 11:35 am
rate this thread
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:
<input type="text" style="display: block">
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
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
- Jukka K. Korpela
November 8, 2005, 11:42 pm
Re: Dynamic width of a text input field in a form
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
> 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.
It's the same even if you add width: auto, which is somewhat odd.
<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.
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.
- » Country list with iso1366 codes and local country names
- — Next thread in » HTML Authoring Forum