473,898 Members | 2,581 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 23511
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
7813
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 sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
2
54413
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 to work. Below I have put a simple page with an Input type of button. Can somebody tell me what I am doing wrong? <HTML> <HEAD>
5
4001
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 afterwards) as the static one. I tried staticDiv = document.GetElementById("staticdiv"); dynDiv = document.GetElementById("dyndiv"); dynDiv.style = staticDiv.style
12
3104
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 { BACKGROUND-IMAGE:url(/someImage.jpg); }
21
4014
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 nothing in IE. I'd be greatful for any assistance. Also, if I will have problems the code on Opera or Safari, I'd appreciate any pointers--I don't have a Mac to test Safari. THanks very much, Michael
4
2546
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 Inherits System.Windows.Forms.UserControl Private _Collection As GridTableStylesCollection
4
2743
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 inline CSS. But whenever I call the focus() method of any of the form fields, the border width of the (first) submit button changes to 2px. It doesn't matter whether the focus() method is called
1
15340
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 = "2px solid green"; When the field looses the focus, the border should change back to red.
3
2268
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
11256
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
10946
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9658
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
7187
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5877
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
6076
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4705
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4295
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3303
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.