PDA

View Full Version : Textarea max character width CSS


tux
01-11-2010, 08:58 PM
Hi all,

I have a textarea in a form that is currently formatted with this....

.form_line textarea{
width: 200px;
height: 50px;
margin-top: 0px;
margin-left: 15px;
font-family: arial;
font-size: 10px;
font-weight: bold;
color: #606677;
text-decoration: none;
line-height: 1em;
}

...and this is the my html....

<div class="form_line"><label for="description">Description *</label><textarea name="description" type="textarea" id="description" cols="30" value=""></textarea>
</div>

What do I need to add to my style to restrict the textarea to a maximum number of characters before a new line is started. Currently when I type in the box it continues in one line and a horizontal scroll bar appears instead of wrapping onto the next line and creating a vertical scroll bar.

Thanks, Paul

domedia
01-11-2010, 09:21 PM
I don't think you can do it inside the textarea. Afaik it will only grab a string of characters. Javascript is an option but it sounds to me that a textarea is too much an integrated part of the browser. Lucky for you I'm often wrong.. ;) anyone?

tux
01-11-2010, 11:16 PM
I just checked this in IE and it wraps okay on to the next line when the limit of 30 is reached. It carries on along the same line in Opera and Firefox.

Any ideas why this is and if there is a work around.

Cheers

DWcourse
01-12-2010, 04:56 AM
I don't know that it will help but, if you got a width in your CSS, you don't really need the cols="30" in your html.

tux
01-12-2010, 06:35 AM
The width is there to keep it the same as the other fields in the form. But I have removed the cols="30". It still only wraps to the next line in IE tho'.

DWcourse
01-12-2010, 07:35 AM
Actually, using your code in FireFox, the text wraps to another line with a vertical scrollbar for me.

Is your page online anywhere?

tux
01-12-2010, 10:25 PM
Strange it worked for you DWcourse!

I have got it to work now. All I did was remove the type="textarea" from the code and it started to work in all browsers.

Strange!!