Word wrapping or scrollbars in textareas with CSS!

Discussion in 'HTML & Website Design' started by GeorgeCSS, Oct 5, 2007.

0
  1. #1
    Hello all!

    I asked this on the Microsoft IE development forums but have had no answer so far, Hopefully I get a better response here! So here it is!

    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 height) 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 horizontal 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>
    HTML:
    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.
     
    GeorgeCSS, Oct 5, 2007 IP
  2. MetaCipher

    MetaCipher Peon

    Messages:
    55
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    word-wrap doesn't work in IE. There is a hack I can think of using JavaScript. Use the onResize event that sets the textarea width to the document width (minus so many pixels if you want), and then put overflow: auto; for the textarea.

    So this post for code regarding the Document width: http://forums.digitalpoint.com/showthread.php?t=488728
     
    MetaCipher, Oct 5, 2007 IP