Forum Moderators: not2easy
If a table cell contains an input/text element the input/text element does not seem to affect the minimum column width of the table when using Firefox.
Instead the value of the input/text elements are clipped, ,but arrow key scrollable, if they are longer than a certain width. IE shows the complete value in the cell. How can I display the whole input/text value in Firefox?
text = AAAAABBBBBCCCCCCDDDDD
Firefox:
----------------------
¦AAAAABBBBBCCCCCC¦
----------------------
IE:
----------------------------
¦AAAAABBBBBCCCCCCDDDDD¦
----------------------------
HTML:
<tr>
<td>
<input type="checkbox" checked="checked" name="sequence_0" value="sequence_0" />
</td>
<td>
<input readonly="readonly" type="text" name="epitope_sequence_0" value="KFIKSLFHIF" />
</td>
<td>
<input readonly="readonly" type="text" name="protein_name_0" value="liver stage antigen-1" />
</td>
<input type="hidden" name="source_sequence_0" value="CAA82975" />
</tr>
Thanks Everyone :),
Derek Basch
does not seem to affect the minimum column width of the table when using Firefox
...
IE shows the complete value in the cell.
dbasch, FF is displaying the correct (according to the specs) behavior here. It is saying, "you gave that container (table) a width, and I'm going to KEEP it that width, even if it means letting the contents of the container spill out into other areas of the layout.
IE, on the other hand, exhibits an auto-enclosing behavior, whereby it "corrects" your "mistake" and increases the width of the container element to enclose the wider content. In many circumstances, this behavior causes a lot of grief, as the altered width of the container can cause many CSS-based layouts to break.
In your situation, however, the auto-enclosing behavior IE is showing seems to be what you want. So to get FF to mimick it, you'll want to do two things...
(1) You need to tell FF that the container does NOT have an explicit width, while continuing to tell IE that it does.
(2) You need to feed FF a min-width setting, instead.
These two things will cause FF to allow the element to expand with content that is wider than it's min-width, but retain the min-width setting should the content not need more space.
There are numerous ways to deliver the various browsers these values. Below is one option that not only gets the job done, but also validates. Since your code does not show the width of the table element in question, I'm going to arbitrarily assign it a width of 300px. You'll want to alter that to match your needs...
html:
<td class="column">
<input type="text" class="text" />
</td>css:
td.column{
width:300px; /*this is the value for IE. By virtue of it's auto-enclosing behavior, it treats width as other browsers treat mn-width.*/
}
html>td.column{/* IE does not get these values because it does not understand the child selector used on this style block*/
width:auto;/*returns width to non-explicit default value for non-ie browsers.*/
min-width:300px; /*establishes the minimum width to use if the content does not exceed it*/
}
input{
width:500px; /*will stretch the column to contain all 500px PROVIDED the table containing the cell is capable of handling the expansion*/
}
cEM
I wanted IE _not_ to stretch the div
Can't be done. There's no way to turn off the auto-enclosing behavior in IE.
