Hello,
I am having an issue when adding/removing the white-space:nowrap style
from a span element contained within a table cell.
Basically I have a complex table, with one column of cells (among
others) that contain text. I've created a link that when clicked will
toggle the wrapping on the text in these cells.
The idea being that if the line is wrapped, the column will shrink
(thus showing more of the table w/out scrolling.) Similarly, when a
line is not-wrapped, the column width will increase to accommodate the
text.
The problem is in firefox; adding the nowrap attribute to the element
causes the column width to increase. But when removing the nowrap
attribute, the text will not wrap and the column width will not
shrink. I've used firebug to confirm the nowrap style is being toggled
on these elements.
The desired functionality works fine in IE and Safari.
Is this simply a limitation of Firefox? or is there a way to do this
through jQuery?
Below is a snippet of code I'm using (note: the table html is not the
exact table I'm using, but I think it demonstrates what I want to do.)
if anyone has any suggestions or ideas, please let me know.
Thanks!
----------------------
.nowrap {
white-space:nowrap;
}
----------------------
function toggleLabels() {
jQuery('.expandCollapseLabel').each(function() {
jQuery(this).toggleClass('nowrap');
});
}
----------------------
<a href="javascript:toggleLabels()">toggle link</a>
<table>
<tr>
<td><span class="expandCollapseLabel">some long text</span><td>
<td>some other stuff</td>
</tr>
<tr>
<td><span class="expandCollapseLabel">some long text</span><td>
<td>some other stuff</td>
</tr>
...
<tr>
<td><span class="expandCollapseLabel">some long text</span><td>
<td>some other stuff</td>
</tr>
</table>
