text breaking out of the div

[screenshot]

All,

A very strange thing is happening on some pages of a web application and I have to fix the defect. I didn't code the page and it is a .jsp page. JAVA code outputs data from HTML text boxes onto another page containing loads of tables and a few divs tags (the java developers here preferred tables vs. css).

We've set an HTML textarea to have a maxlength of 200 characters. However, when 200 characters is typed into the textarea and the data is output onto another page (in a table), it is breaking out of the div "container" class (where this table resides). I have set the "container" class to width:760; align:center. However, the data output from the textarea box is stretching across the screen to the right -- thus, breaking out of the div "container". I have the table within the div container class, so I'm not sure why the 200 characters is not wrapping within the table cell within the div of 760. I can't put the page code in this thread as it contains proprietary information, so I hope I've explained this defect well enough for someone to visualize what I am talking about.

Is there a way to keep the text from breaking out of the div? Has anyone ever experienced this?

Thanks

[Twey]

760 what?

This is entirely expected. Text will display outside the element if it cannot fit inside it. If you don't want this to happen, apply overflow: hidden, overflow: scroll, or overflow: auto to the container.

[screenshot]

Thanks for your response.

760px, my bad.

I did some research as well at http://www.idocs.com/tags/forms/_TEXTAREA_WRAP.html where it says to add the wrap attribute and set to "soft | hard | off". I tried to set it hard, but that did not work -- the text still breaks out of the div. Here is a snippet:



<div class="container">
<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td class="strong greyText" colspan="2" align="left">Reason for Request:&nbsp;&nbsp;<em>Limit 200 characters</em><br>
<html:textarea property="interest_reason" styleId="interest_reason" cols="50" rows="3" wrap="hard" onkeydown="limitText(this.form.interest_reason,200);" onkeyup="limitText(this.form.interest_reason,200);"></html:textarea>
</td>
</tr>
</table>
</div>


Note: The "bold" font in the code above (wrap) is just to guide your eye.

Here is the style:



<style>
div.container {
width: 760px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
align: center;
padding: 0px;
}
</style>


I don't know whether it is b/c of the HTML textarea element is w/i JAVA code that the browser seems to ignore the wrap attribute or not. But I will try your suggestion to use overflow property and let you know the result momentarily.

[screenshot]

Ok, the results are in...

After reading about the overflow property at: http://www.w3schools.com/css/pr_pos_overflow.asp, I decided this is not what I wanted to happen. But as suggested, I tried the overflow property in the container style. It worked as expected, but I don't want scroll bars. I want the text entered in the textarea to wrap and stay within the div class=container style once it is output in the table cell. I guess without a visual image of page, this sounds confusing, but I'm unable to provide that image.

I thought that by setting the size attribute of the textarea would control the length of it, so that even though I want to limit the amount of characters to 200, only 50 could be seen. Thus, the textarea would be smaller than the table and display within the table cell as a textarea with scrollbars on itself, not scrollbars on the entire page. I'm assuming there's no way to force the text in the textarea to wrap and stay within the table cell within the div.

Wow, that was a mouthful! I appreciate your help, guys & gals, and if someone comes up with more insight/suggestions, please don't hesitate to post. I'll do more research as well, and let all know what I find.

Thanks again for your help.

[screenshot]

Solution:

The problem was that QA input 200 characters (200 "d"s) without spaces, so the text would not wrap and displayed as one continuous line. Since there's no such word in the English language that contains 200 characters, the text would have wrapped if spaces were included between characters.