Discussion:
Problem with setting text input to 100% width
(too old to reply)
John Chrisman
2005-12-29 15:47:45 UTC
Permalink
How can I get this textbox to 100% the width of the containing block in IE?

<html>
<head></head>
<body>
<form>
<table width="640px">
<tr>
<td><input type="text" style="width: 100%" value="This is an extremely
long block of text that is designed to overflow the text box. For some
reason the width of this text box will be 100% of what is required to
display all of the text rather than 100% of the width of the tables
container. I don't want the stupid scroll bars to appear at the bottom, I
simply want the form field to be the width of the screen."></td>
</tr>
</table>
</form>
</body>
</html>
McKirahan
2005-12-29 16:18:15 UTC
Permalink
Post by John Chrisman
How can I get this textbox to 100% the width of the containing block in IE?
<html>
<head></head>
<body>
<form>
<table width="640px">
<tr>
<td><input type="text" style="width: 100%" value="This is an extremely
long block of text that is designed to overflow the text box. For some
reason the width of this text box will be 100% of what is required to
display all of the text rather than 100% of the width of the tables
container. I don't want the stupid scroll bars to appear at the bottom, I
simply want the form field to be the width of the screen."></td>
</tr>
</table>
</form>
</body>
</html>
This works: style="width: 640px"
John Chrisman
2005-12-29 16:24:19 UTC
Permalink
It doesn't work for me. I'm using IE 6.0. Changing the table to use style
instead of width has no effect on the way it is displayed.
Post by McKirahan
Post by John Chrisman
How can I get this textbox to 100% the width of the containing block in
IE?
Post by John Chrisman
<html>
<head></head>
<body>
<form>
<table width="640px">
<tr>
<td><input type="text" style="width: 100%" value="This is an extremely
long block of text that is designed to overflow the text box. For some
reason the width of this text box will be 100% of what is required to
display all of the text rather than 100% of the width of the tables
container. I don't want the stupid scroll bars to appear at the bottom, I
simply want the form field to be the width of the screen."></td>
</tr>
</table>
</form>
</body>
</html>
This works: style="width: 640px"
McKirahan
2005-12-29 17:25:39 UTC
Permalink
Post by John Chrisman
It doesn't work for me. I'm using IE 6.0. Changing the table to use style
instead of width has no effect on the way it is displayed.
Post by McKirahan
Post by John Chrisman
How can I get this textbox to 100% the width of the containing block in
IE?
Post by John Chrisman
<html>
<head></head>
<body>
<form>
<table width="640px">
<tr>
<td><input type="text" style="width: 100%" value="This is an
extremely
Post by McKirahan
Post by John Chrisman
long block of text that is designed to overflow the text box. For some
reason the width of this text box will be 100% of what is required to
display all of the text rather than 100% of the width of the tables
container. I don't want the stupid scroll bars to appear at the
bottom,
Post by John Chrisman
I
Post by McKirahan
Post by John Chrisman
simply want the form field to be the width of the screen."></td>
</tr>
</table>
</form>
</body>
</html>
This works: style="width: 640px"
I didn't suggest "Changing the table to use style instead of width".

I suggested that you replace:
<input type="text" style="width: 100%" value="...">
with
<input type="text" style="width: 640px" value="...">
though apparently it wasn't obvious.

Loading...