Word wrapping or scrollbars in textareas with CSS!

Internet Explorer Web Development

DeveloperGeorge

Hello!

I am working on an application which uses a lot of CSS for dynamic layouts as well as dynamic fields in which the sizes (width and heigth) are set in percentages so that screen resolution is not a display issue. In other words, the field sizes are dynamically relative to the screen resolution.

I am encountering a problem though; it concerns textareas. When the textarea loads a very long unspaced string (a silly thing that shouldn't happen in the real-world but hey, it's part of the test cases...), the string never actually goes to the next line nor does a horizontal scrollbar appear. It just increases the width of the textarea to fit that one very long String into one line.

What I want is the textbox to either rely on vertical scrollbars or skip lines. Under Firefox I get the vertical scrollbars which is nice. How can I force one these behaviour under IE I've type using the 'wrap' attribute and 'word-wrap' under CSS but no dice.

Here's a very simple code demo:

<table style="width:100%;" border="1">
<tr>

<td style="width:75%;">
This cell should take 75% of the total width
</td>
<td style="width:25%;">
<textarea name="comments" style="width:100%;" rows="6">MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</textarea>
</td>
</tr>
</table>



Furthermore, the width of the textarea needs to stay at 100% so that it is dynamically resized to take as much space as possible in its cell, according to the resolution. Worst case scenario I'll have to use a fixed width but that would be a real shame.


Developing, testing and deploying with IE version 6.
Top

Re: Internet Explorer Web Development Word wrapping or scrollbars in textareas with CSS!

dyarwood

Try this


Code Block

<table style="width:100%;" border="1">
<tr>

<td style="width:75%;">
This cell should take 75% of the total width
</td>
<td style="width:25%;">
<textarea name="comments" style="width:auto;"

rows="6">MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM

MMMMMMMMMMMMMMMMMMMMMMMMMMM</textarea>
</td>
</tr>
</table>

The auto seems to work correctly.

Hope this helps.


Top

Re: Internet Explorer Web Development Word wrapping or scrollbars in textareas with CSS!

DeveloperGeorge

Good thinking but unfortunately this is not the answer. Setting auto as width for a textarea, in IE, gives the same behaviour as giving a fixed value. It will set the textarea width to a certain size and that size will remain static regardless of all the space that is available when we maximize the window.


Top