CSS, DOM and Javascript

liunx

Guest
I'm pretty good at this stuff but have gotten stumped. I have a page that displays data in Table cells (tabular data).

When a user clicks into that cell, a Javascript function is called that retrieves that cell data. Then, using the DOM, I do a removeChild from the cell to delete the text node. Then, I create an INPUT element on the fly and the function puts the previous cell data into the value of that INPUT box. Do you follow so far...

Once the text box has been modified and the onBlur event happens, I reverse the process. I capture the new value of the INPUT element and do a removeChild to get rid of the INPUT box. Then, I create a text node and replace the Table cell content with the new value.

THE PROBLEM:

No matter what I put in my stylesheet, the new text node content will not wrap inside the table cell.
I cannot even do a fixed pixel size. Note that I am developing in Firefox.Ok. Fixed no sooner than I posted. I found this useful tidbit of CSS:

white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
 
Back
Top