Text area cramping my style

Hi,

I've got a problem with text area's. Specifically the way they handle text. My problem is that I can't find a good way for the text in a text area to automatically switch to a new line after a certain length is met, and keep proper formatting.

Say I've got a normal text area

<textarea></textarea>

when typing into that, the text goes on and on and on and on and on... always augmenting the horizontal scrollbar. I found a property called WRAP and it wraps the text to the width of the text area, which is fine and dandy. However, when submitted and stored in the database, the text keeps the style of the text area.

I've got a text box 300px wide. The page for my site is let's say 500px wide.
I type into the text area, and at the end of 300px a new line is automatically created. When I submit the form, the data is kept in the db. However, it keeps its 300px width. When the info is recalled from the db to be displayed on my 500px wide page, it's formatted as 300px wide when I want it to fill the full width of the page.

So what I'm looking for is a method that after 300px or x amount of length, the text area will automatically move to a new line BUT when it's called back from the database, it will fill the full page. Am I making sense?

Perhaps it would be clearer with the real example.
http://www.ridemtl.com/articles/view/3/

See there, the text doesn't fill the whole page?

I'm trying to think/find a Javascript solution, but I'm not experienced with JS so I haven't turned anything up. Perhaps something with the on.keydown function will work :confused:

Thanks
-CMC

Hi fl00d :)

I've got a problem with text area's. Specifically the way they handle text. My problem is that I can't find a good way for the text in a text area to automatically switch to a new line after a certain length is met, and keep proper formatting.
Have you tried this to make the length of the textarea a certain length and height?
<textarea rows="5" cols="40">

Just adjust the above numbers as you see fit.

I am not sure I understand the second part of your question, but assuming you are writing input to a db and then including it on a certain part of the page...can you not use CSS to adjust the width of the included text?

Best Regards,

Drew

Hi,

Thanks for replying :) I do have the width and height properties set, but even with that, the scroll bar continues on and on. Only when I set the WRAP propery does it adjust to a new line. However, with the WRAP attribute in place, it doesn't show up on the page properly (as shown in the example).

The CSS for the page is set correctly, but the text comes out pre-formatted. That's the problem I'm having :confused:

Have I made it any clearer? Reading over my previous post, it is pretty confusing and unclear.

the problem you're having with your text being broken like that can be fixed with something as simple as


public string doProperFormat(string myText){
return "<div style='width:500px; overflow:hidden;'>" + myText.replace("<br />", "") + "</div>";
}


if you're using c# anyways, it's not that your text is formatted to 300px, just that it's including literal line breaks (br) where the 300px theoretical max for input would be in say an wysiwyg html editor. as far as the textarea not displaying correctly when wrap is set, an example would be really helpful, especially since if a display problem is generated by setting the wrap attribute, there is more than likely a way to use css to compensate for the layout change it creates. posting the code for the page that contains the text area would work just as well.

by the way, if you're looking to actually be able to include line breaks that in your code (after applying my suggestion above) you can simply add a token that indicates line break and replace it to <br /> after replacing the regular br s. or, you can just put a blank line in between paragraphs and use a lil trick like this


.replace("<br /><br />", "{line break}").replace("<br />", "").replace("{line break}", "<br /><br />")


to keep double line breaks, but remove single ones. just throwin it out there