[thelist] Problem with CSS width: x% on a input text field

Rob Mueller robm at fastmail.fm
Fri Mar 21 02:05:27 CST 2003


Hi

I'm having a bit of a problem with the "width" attribute in CSS. Basically
I'm trying to create a table that contains some text input boxes and I want
the boxes to scale nicely as the size of the window they're in change. The
obvious first solution was this:

<input type="text" style="width: 100%" />

Pretty simple, and here's an example mockup of what I'm trying to create. As
you resize the window, the To/Cc/Bcc text boxes nicely resize to take up the
space available to them...

http://robm.fastmail.fm/mockup/compose_mockup5.html

That's all nice, because basically I thought if you used "width: 100%" it
meant "Set the width of this object to 100% of the width of the enclosing
object". However, I've discovered this isn't right if the input field is
this:

<input type="text" style="width: 100%" value="... some very long string ..."
/>

Then the width on which the 100% is calculated is based on the the width of
the string, not the width of the enclosing box! That's really annoying! I've
come up with a hacky solution, which involves leaving the value="" as empty,
and then using JS after the document has loaded to change the value, but
that just seems hacky. Here's some examples:

http://robm.fastmail.fm/mockup/testcsswidth.html

The first one shows the problem, the way the text boxes are set to 100% of
the width of the text string in them, rather than the enclosing TD cell.

The second shows that it works fine if the string is less than the size of
the enclosing TD, it uses 100% of the enclosing box.

The third uses my JS solution to the problem

The fourth shows that using a class="" attribute doesn't fix the problem
either.

So basically I want a text box that grows and shrinks to the size of the
enclosing area, I don't want the width to have anything to do with the
default text value.

I've done some searching, but I can't find any obvious answers anywhere.
Does anyone have any ideas on what CSS I should be using?

Rob



More information about the thelist mailing list