column expands with “textbox width given in percentage” within table

StackOverflow https://stackoverflow.com/questions/423677

  •  05-07-2019
  •  | 
  •  

Question

I am using the following code

--- EDIT @annakata : Adding the complete code

<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>

 <BODY>
  <table id="additionalContactsTable" name="additionalContactsTable"
                                        width="100%"
                                >
                                        <thead>
                                                <tr>
                                                        <th style="text-align: center" class="Ntablerow1RightDark" width="25%"><b>Last</b> </th>
                                                        <th style="text-align: center" class="Ntablerow1RightDark" width="25%"><b>First</b> </th>
                                                        <th style="text-align: center" class="Ntablerow1RightDark" width="25%"><b>Middle</b> </th>
                                                        <th style="text-align: center" class="Ntablerow1RightDark" width="25%"><b>Email</b> </th>
                                                <tr>
                                        </thead>
                                        <tbody>

                                                <tr>

<td class="NcontextlabelboldNormal" height="24">  <input maxlength="256"
        type="text" name="additionalContact" style="width: 90%;"
        value="aaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaa" > </td>
        <td class="NcontextlabelboldNormal" height="24">  <input maxlength="256"
        type="text" name="additionalContact" style="width: 90%;"
        value="aaaaaaaaaaaaaaaaaaaaaaaaaa" > </td>
        <td class="NcontextlabelboldNormal" height="24">  <input maxlength="256"
        type="text" name="additionalContact" style="width: 90%;"
        value="aaaaaaaaaaaa aaaaaaaa aaaaaaaaaab bbbbbbbb bbbbbbbbbbbbbbbb" > </td>
        <td class="NcontextlabelboldNormal" height="24">  <input maxlength="256"
        type="text" name="additionalContact" style="width: 90%;"
        value="aaaaaaaa  aaaaaa aaaaaaa aaaaa" > </td>

 </BODY>
</HTML>

The problem arises when the user enters a large text, the text box expands and table is distorted. If I put size="30" in there the expansion problem is fixed but on different resolutions, the structure behaves diffferently.

Any fixes or wok around to achieve the desired gracefully ?

Was it helpful?

Solution

ok, I can clearly see this replicated in IE now.

It appears to be a bug in IE (IE has notorious issues with percentages) dependant on a scenario where:

  • the input is in a table
  • AND the input is sized in percentage
  • AND the input has a default value (i.e. in the markup) which exceeds the width

Therefore a couple of obvious workarounds exist:

  • put the input in a floating <div> layout instead (I would do this if it's semantically correct)
  • size width in units like em (preferably) or px (if your design can afford it)
  • inject the value with client script after the load (this is a poor solution, don't do this)

and one non-obvious workaround which I would recommend if you require both the table and the percentages:

  • an IE only CSS rule width: expression(this.parentNode.offsetWidth*0.9);

Hope this helps.

(previous answer requesting code deleted)

Edit: code snippet based on your sample, works in IE + FF

<style>
/* table method */
table {width: 100%;}
th {width: 25%; text-align: center; font-weight: 700;}
td {height: 24px; width: 25%;}
td input {overflow: hidden; width: 90%; }
/* IE only correction */
* html td input {width: expression(this.parentNode.offsetWidth*0.9);}

/* float method */
#foo {width: 100%;background:blue;}
#foo div {float:left; width: 25%;}
#foo div  input {width: 90%;}
 </style>

<table>
    <thead>
            <tr>
                    <th>Last</th>
                    <th>First</th>
                    <th>Middle</th>
                    <th>Email</th>
            <tr>
    </thead>
    <tbody>
            <tr>
                <td>
                    <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaa" /> 
                </td>
                <td>
                    <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaaaaaaaaaaaaaaaaa" /> 
                </td>
                <td>
                    <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaaa aaaaaaaa aaaaaaaaaab bbbbbbbb bbbbbbbbbbbbbbbb" /> 
                </td>
                <td>
                    <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaa  aaaaaa aaaaaaa aaaaa" /> 
                </td>
            </tr>
    </tbody>
</table>

<div id="foo">
    <div>
        <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaa" > 
    </div>
            <div>
        <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaaaaaaaaaaaaaaaaa" > 
    </div>
            <div>
        <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaaa aaaaaaaa aaaaaaaaaab bbbbbbbb bbbbbbbbbbbbbbbb" > 
    </div>
            <div>
        <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaa  aaaaaa aaaaaaa aaaaa" > 
    </div>
</div>

OTHER TIPS

I use following code to solve this problem

...
<td width="100%">
  <table style="table-layout:fixed;width:100%">
    <tr>
      <td style="padding-right:7px;">
        <input style="width:100%;" type="text"/>
      </td>
    </tr>
  </table>
</td>
...

just solved myself this problem, and I fell just...

Change document type definition to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

but care that other parts of the page don't start jumping around.

using CSS rule width: expression(this.parentNode.offsetWidth*0.9); solved my problem.. bingo !!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top