How to grow/shrink size of textbox with table cell width?

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%” />

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!

How can I do what I need? (How can I make the text box shrink/grow with the size of the surrounding object, even if the text value is huge?)


Try making the width a number, not a percent: have it equal your table’s width.

Setting width:100%; will set the current element to 100% of the width of the parent element.

if the text is stretching the textarea, and therefore stretching the parent element, try using the css max-width:; attribute.

and if that doesn’t work, use pixel values.

hope that helps,


Hello, I appreciate the suggestions so far. (The “max-wdith” didn’t work though…)

Just to clarify, I am trying to dynamically change the textbox size with the table size. So if someone resizes their screen, the table will grow/shrink (because it uses a width %) and I need the textbox to grow/shrink along with it.

So using a fixed number or pixel value will not work…

What youre using should be working


Try replacing the value of the text input with this:

value=“somasdfasdfasdfasdfasdfasddddddddddddddddddddddddddddddddddddddddsdfasdfe very long text…asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf.”

You’ll see that the text box no longer shrinks properly… :xeye:

Looks like its a limitation of IE. Works fine in mozilla…

looks like your out of luck

Also, couldnt you use a textarea instead? seeing as the string is so long?

textarea ends up doing the same thing. (ie: if you start with a page full of info in the textbox, it doesn’t grow/shrink properly.)

Oh well… if anyone has any ideas why this isn’t working, please let me know.