473,320 Members | 2,083 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Style Width Problem in Text Input

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
8 23403
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
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
by: BiNZGi | last post by:
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...
2
by: DBLWizard | last post by:
Howdy All, I am trying to standardize all the buttons on a site by using a style sheet to specify their height, width, background all those things. But I can seem to get the simplest of things...
5
by: Sparhawk | last post by:
I got two div tags. One is hardcoded, one is created on the page using javascript. I want the dynamically created DIV to have the same style settings (except for two which I will change...
12
by: relaxedrob | last post by:
Hi All! I have a page with with the following style information: <link rel="stylesheet" type="text/css" href="/eEmployment/eTech.css" /> <style type="text/css"> DIV.Application {...
21
by: Michael Bierman | last post by:
Please forgive the simplicy of this question. I have the following code which attempts to determine the color of some text and set other text to match that color. It works fine in Firefox, but does...
4
by: Michael | last post by:
Dear all .. If I want to use develop a user control and declare a public property which the type is System.Windows.Forms.GridTableStylesCollection For example : Public Class LookAndView...
4
by: Johannes Kiehl | last post by:
Hi group, I've been losing most of my remaining hair today, trying to track down a problem with IE6.0 (builds: .2600 and XP SP 2). I set the border-width of form input fields to 1px via...
1
by: Armin Gajda | last post by:
Hi, I have the following problem: An input field get a border assigned by a style class (e.g. 2px solid red). When the field gets the focus, we set the border to green. element.style.border...
3
by: =?Utf-8?B?dG9t?= | last post by:
Hi All, I have a theme with a Style.css in which I have defined a style rule for the body element : body { min-width: 780px; margin: 0; padding: 0;
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.