By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,394 Members | 1,912 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,394 IT Pros & Developers. It's quick & easy.

Style Width Problem in Text Input

P: n/a
Hi

I have reduced the problem to this code:

<form>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><input type="text" style="width: 100%;" value="Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie"></td>
</tr>
</table>
<input type="submit" value="Submit">
</form>

If the Textbox has no text in it, it looks ok. The table is expanded
to the max width in the browser.

If there is a long text like the above in it, the browser renders the
textbox as long as the text is, also the table.

This is not what i am expecting of the textbox. With the width style
applied, i think it should be sized with the maximum of the browser
width and the rest of the text is not shown, like i use the size
property of it.

Any ideas?

Greetz
BiNZGi
Jul 20 '05 #1
Share this Question
Share on Google+
8 Replies


P: n/a
bi****@bigfoot.com (BiNZGi) wrote:
I have reduced the problem to this code:

<form>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><input type="text" style="width: 100%;" value="Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie"></td>
Why? Why have so much text displayed in an element that is intended
for _input_?

If you are providing text for the user to edit then a textarea would
avoid these problems. If you are merely displaying text then use plain
text.
</tr>
</table>
<input type="submit" value="Submit">
</form>

If the Textbox has no text in it, it looks ok. The table is expanded
to the max width in the browser.

If there is a long text like the above in it, the browser renders the
textbox as long as the text is, also the table.

This is not what i am expecting of the textbox. With the width style
applied, i think it should be sized with the maximum of the browser
width and the rest of the text is not shown, like i use the size
property of it.


The rules for calculating widths are given in the CSS spec, and in the
case of the example above, boil down to:

1. width: 100%; on the input element means 100% of its parent, which
is the td.
2. The width of the td is the width of its contents, in this case the
input.
3. The width of the table is the greater of its defined width (100%)
and the width of all its cells (i.e. the width derived in step 2).

1 and 2 are obviously circular and the browser (whichever one it is
that you're using) has decided that give priority to the width of the
contents. This is perfectly in line with the CSS specs.

Adding table-layout: fixed; to the styles for the table creates the
effect you want as it changes steps 2 and 3 as outlined in
http://www.w3.org/TR/CSS21/tables.html#width-layout
However, table-layout: fixed; may not be desirable depending on what
else the real table contains. My suggestion would still be to use a
textarea for editing large amounts of text, and not to use a form
element at all if just displaying text.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #2

P: n/a
bi****@bigfoot.com (BiNZGi) wrote:
I have reduced the problem to this code:

<form>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><input type="text" style="width: 100%;" value="Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie"></td>
Why? Why have so much text displayed in an element that is intended
for _input_?

If you are providing text for the user to edit then a textarea would
avoid these problems. If you are merely displaying text then use plain
text.
</tr>
</table>
<input type="submit" value="Submit">
</form>

If the Textbox has no text in it, it looks ok. The table is expanded
to the max width in the browser.

If there is a long text like the above in it, the browser renders the
textbox as long as the text is, also the table.

This is not what i am expecting of the textbox. With the width style
applied, i think it should be sized with the maximum of the browser
width and the rest of the text is not shown, like i use the size
property of it.


The rules for calculating widths are given in the CSS spec, and in the
case of the example above, boil down to:

1. width: 100%; on the input element means 100% of its parent, which
is the td.
2. The width of the td is the width of its contents, in this case the
input.
3. The width of the table is the greater of its defined width (100%)
and the width of all its cells (i.e. the width derived in step 2).

1 and 2 are obviously circular and the browser (whichever one it is
that you're using) has decided that give priority to the width of the
contents. This is perfectly in line with the CSS specs.

Adding table-layout: fixed; to the styles for the table creates the
effect you want as it changes steps 2 and 3 as outlined in
http://www.w3.org/TR/CSS21/tables.html#width-layout
However, table-layout: fixed; may not be desirable depending on what
else the real table contains. My suggestion would still be to use a
textarea for editing large amounts of text, and not to use a form
element at all if just displaying text.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #3

P: n/a
Steve Pugh <st***@pugh.net> wrote in message news:<q5********************************@4ax.com>. ..
bi****@bigfoot.com (BiNZGi) wrote:
I have reduced the problem to this code:

<form>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><input type="text" style="width: 100%;" value="Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie"></td>
Why? Why have so much text displayed in an element that is intended
for _input_?

If you are providing text for the user to edit then a textarea would
avoid these problems. If you are merely displaying text then use plain
text.


Yes, it is input because the mask is generated on the server and
filled with data from a database. The User could change the data and
submit it back to the server.
</tr>
</table>
<input type="submit" value="Submit">
</form>

If the Textbox has no text in it, it looks ok. The table is expanded
to the max width in the browser.

If there is a long text like the above in it, the browser renders the
textbox as long as the text is, also the table.

This is not what i am expecting of the textbox. With the width style
applied, i think it should be sized with the maximum of the browser
width and the rest of the text is not shown, like i use the size
property of it.


The rules for calculating widths are given in the CSS spec, and in the
case of the example above, boil down to:

1. width: 100%; on the input element means 100% of its parent, which
is the td.
2. The width of the td is the width of its contents, in this case the
input.


Are you sure? I thought td gets the width of its parent, that is tr.
And tr gets its width from table, that is 100%.
3. The width of the table is the greater of its defined width (100%)
and the width of all its cells (i.e. the width derived in step 2).

1 and 2 are obviously circular and the browser (whichever one it is
that you're using) has decided that give priority to the width of the
contents. This is perfectly in line with the CSS specs.

Adding table-layout: fixed; to the styles for the table creates the
effect you want as it changes steps 2 and 3 as outlined in
http://www.w3.org/TR/CSS21/tables.html#width-layout
However, table-layout: fixed; may not be desirable depending on what
else the real table contains. My suggestion would still be to use a
textarea for editing large amounts of text, and not to use a form
element at all if just displaying text.


Hm, in the real case the td containing the text input is smaller.
Therefore it needs lesser text to broke up the width.

The goal is to give the input box a size, that is equal to td.

Thanks for your answer Steve.
Jul 20 '05 #4

P: n/a
Steve Pugh <st***@pugh.net> wrote in message news:<q5********************************@4ax.com>. ..
bi****@bigfoot.com (BiNZGi) wrote:
I have reduced the problem to this code:

<form>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><input type="text" style="width: 100%;" value="Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie"></td>
Why? Why have so much text displayed in an element that is intended
for _input_?

If you are providing text for the user to edit then a textarea would
avoid these problems. If you are merely displaying text then use plain
text.


Yes, it is input because the mask is generated on the server and
filled with data from a database. The User could change the data and
submit it back to the server.
</tr>
</table>
<input type="submit" value="Submit">
</form>

If the Textbox has no text in it, it looks ok. The table is expanded
to the max width in the browser.

If there is a long text like the above in it, the browser renders the
textbox as long as the text is, also the table.

This is not what i am expecting of the textbox. With the width style
applied, i think it should be sized with the maximum of the browser
width and the rest of the text is not shown, like i use the size
property of it.


The rules for calculating widths are given in the CSS spec, and in the
case of the example above, boil down to:

1. width: 100%; on the input element means 100% of its parent, which
is the td.
2. The width of the td is the width of its contents, in this case the
input.


Are you sure? I thought td gets the width of its parent, that is tr.
And tr gets its width from table, that is 100%.
3. The width of the table is the greater of its defined width (100%)
and the width of all its cells (i.e. the width derived in step 2).

1 and 2 are obviously circular and the browser (whichever one it is
that you're using) has decided that give priority to the width of the
contents. This is perfectly in line with the CSS specs.

Adding table-layout: fixed; to the styles for the table creates the
effect you want as it changes steps 2 and 3 as outlined in
http://www.w3.org/TR/CSS21/tables.html#width-layout
However, table-layout: fixed; may not be desirable depending on what
else the real table contains. My suggestion would still be to use a
textarea for editing large amounts of text, and not to use a form
element at all if just displaying text.


Hm, in the real case the td containing the text input is smaller.
Therefore it needs lesser text to broke up the width.

The goal is to give the input box a size, that is equal to td.

Thanks for your answer Steve.
Jul 20 '05 #5

P: n/a
bi****@bigfoot.com (BiNZGi) wrote:
Steve Pugh <st***@pugh.net> wrote in message news:<q5********************************@4ax.com>. ..
bi****@bigfoot.com (BiNZGi) wrote:
> <td><input type="text" style="width: 100%;" value="Lorem ipsum
> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
> nibh euismod tincidunt ut laoreet dolore magna aliquam erat
> volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
> tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
> commodo consequat. Duis autem vel eum iriure dolor in hendrerit
> in vulputate velit esse molestie"></td>
Why? Why have so much text displayed in an element that is intended
for _input_?

If you are providing text for the user to edit then a textarea would
avoid these problems. If you are merely displaying text then use plain
text.


Yes, it is input because the mask is generated on the server and
filled with data from a database. The User could change the data and
submit it back to the server.


Textarea would be much more user friendly.
2. The width of the td is the width of its contents, in this case the
input.


Are you sure? I thought td gets the width of its parent, that is tr.
And tr gets its width from table, that is 100%.


Did you read the URL I posted?
http://www.w3.org/TR/CSS21/tables.html#width-layout
The widths of the various table elements do not follow the normal CSS
box model.
Adding table-layout: fixed; to the styles for the table creates the
effect you want as it changes steps 2 and 3 as outlined in
However, table-layout: fixed; may not be desirable depending on what
else the real table contains.

Hm, in the real case the td containing the text input is smaller.
Therefore it needs lesser text to broke up the width.


table-layout: fixed may still work. You just need to set appropriate
overflow properties as well.

But I'll say it yet again, why not a textarea?
The goal is to give the input box a size, that is equal to td.


The most reliable way to do that is to specify both input and td
widths in any unit other than percentages.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #6

P: n/a
bi****@bigfoot.com (BiNZGi) wrote:
Steve Pugh <st***@pugh.net> wrote in message news:<q5********************************@4ax.com>. ..
bi****@bigfoot.com (BiNZGi) wrote:
> <td><input type="text" style="width: 100%;" value="Lorem ipsum
> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
> nibh euismod tincidunt ut laoreet dolore magna aliquam erat
> volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
> tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
> commodo consequat. Duis autem vel eum iriure dolor in hendrerit
> in vulputate velit esse molestie"></td>
Why? Why have so much text displayed in an element that is intended
for _input_?

If you are providing text for the user to edit then a textarea would
avoid these problems. If you are merely displaying text then use plain
text.


Yes, it is input because the mask is generated on the server and
filled with data from a database. The User could change the data and
submit it back to the server.


Textarea would be much more user friendly.
2. The width of the td is the width of its contents, in this case the
input.


Are you sure? I thought td gets the width of its parent, that is tr.
And tr gets its width from table, that is 100%.


Did you read the URL I posted?
http://www.w3.org/TR/CSS21/tables.html#width-layout
The widths of the various table elements do not follow the normal CSS
box model.
Adding table-layout: fixed; to the styles for the table creates the
effect you want as it changes steps 2 and 3 as outlined in
However, table-layout: fixed; may not be desirable depending on what
else the real table contains.

Hm, in the real case the td containing the text input is smaller.
Therefore it needs lesser text to broke up the width.


table-layout: fixed may still work. You just need to set appropriate
overflow properties as well.

But I'll say it yet again, why not a textarea?
The goal is to give the input box a size, that is equal to td.


The most reliable way to do that is to specify both input and td
widths in any unit other than percentages.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #7

P: n/a
Steve Pugh <st***@pugh.net> wrote in message news:<rl********************************@4ax.com>. ..

table-layout: fixed may still work. You just need to set appropriate
overflow properties as well.

But I'll say it yet again, why not a textarea?
The goal is to give the input box a size, that is equal to td.


The most reliable way to do that is to specify both input and td
widths in any unit other than percentages.


Thanks for your explanations, steve. I will try to use textarea to fix
up the problem.
Jul 20 '05 #8

P: n/a
Steve Pugh <st***@pugh.net> wrote in message news:<rl********************************@4ax.com>. ..

table-layout: fixed may still work. You just need to set appropriate
overflow properties as well.

But I'll say it yet again, why not a textarea?
The goal is to give the input box a size, that is equal to td.


The most reliable way to do that is to specify both input and td
widths in any unit other than percentages.


Thanks for your explanations, steve. I will try to use textarea to fix
up the problem.
Jul 20 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.