HTML table resize problem

[vilaishima]

I have a serious problem with an HTML table. I have a page where the user must be able to enter data in a textbox. I opted to use <div>'s and set the ContentEditable property to true. The reason for this is that I have to 'grow' the textboxes as the user enters text.

The problem is that I have a fixed width table and it resizes as my <div>'s go over to a next line (using the WORD-WRAP: break-word style attrib. I would appreciate any ideas on this. Here is the HTML:

<TABLE style=&quot;WIDTH: 645px&quot; cellSpacing=&quot;2&quot; cellPadding=&quot;2&quot; border=&quot;1&quot;>
<TBODY>
<TR>
<TD style=&quot;WIDTH: 255px&quot;>Please enter the text here:</TD>
<TD style=&quot;width: 350px&quot;>
<DIV ContentEditable=true style=&quot;width: 250px; WORD-WRAP: break-word&quot;></DIV>
</TD>
<TD style=&quot;width: 40px&quot;> </TD>
</TR>
</TBODY>
</TABLE>

 

[ChrisHunt]

Actually you have a couple of more serious problems:
[ol]
[li]ContentEditable only works with IE[/li]
[li]How are you going to capture the text when the user has entered it?[/li]
[/ol]
For both these reasons I'd recomment you use a <textarea> tag instead. That said, your <div> approach seems to be working fine for me on IE6, insofar as it doesn't resize the table horizontally as the <div> fills up.

-- Chris Hunt
Extra Connections Ltd

http://www.extracon.com

The real world's OK for a visit, but you wouldn't want to LIVE there!

 

[vilaishima]

Thanks ChrisHunt

I have also tested it and found that it does infact work correctly if you have at least one space in a line of text entered.

What I am developing is an intranet application and all the users use IE, so that furtunately is not an issue.

As for the <div>s, I can access the text entered by passing the innerText of the <div>s if I pass the values with Javascript. The problem is that I use ASP so I submit a form and when doing this the innerText of <div>'s do not get passed.

I opted for the <div>s instead of <textarea>s because I need all the entered text to be displayed on the screen for printing capabilities.

 

[vilaishima]

I have found a way - thanks Chris.

Opted for Textareas like you suggested for there is no way of submitting the values of a div with a form. I just used the same word-wrap attribs and could then also remove the contenteditable property from the elements.

Rolf Hansen
Cloudy Apple Software

http://www.cloudyapple.com