ansaurus

Question

column expands with "textbox width given in percentage" within table

Answer 1

+1 A:

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>

annakata 2009-01-08 09:37:50

try setting the value of any of the text boxes to have large no of characters say 50+. Then the text box will expand.

Nrj 2009-01-09 03:29:25

I can put the full 256 chars in there without seeing a problem in IE6+7, FF, opera and chrome

annakata 2009-01-09 08:52:06

I have added the complete code. Please see.

Nrj 2009-01-09 10:14:05

css workaround worked fine for IE but its a no fix for FF.Can you help expanding on floating div.. how to use it.. may be an ex.Thanks in advance.

Nrj 2009-01-12 03:42:36

expression is an IE only value, but I've edited in the code for completeness - I do not see an issue in FF

annakata 2009-01-12 09:00:21

Answer 2

+1 A:

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>
...

Dmitry Belous 2009-03-11 19:42:54

This worded great for me... thanks for putting it up.

vdh_ant 2010-03-10 02:07:09

Answer 3

A:

Hi, 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.

Nikola 2009-10-13 17:55:20

Answer 4

A:

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

Neelima 2009-11-03 09:30:17

ansaurus

tags:

views:

answers:

column expands with "textbox width given in percentage" within table

related questions