setting the size of a textarea

rubyonrails-talk
1

i have noticed this a few times in the past, but right now, i need to get this fixed so that my form will fit inside a div..

i currently have this code:

<%= text_area @project, :description, :rows => "2", :cols => "20" %>

which should give me a 20x2 text area...

unfortunately, i get a huge text area..

the code that is generated is:

<textarea cols="20" id="project_description" name="project[description]" rows="2"></textarea>

which seems to be just fine..

no matter what i change the attributes to, the textarea generated is the same size..

i checked it on chrome and safari..

any help would be greatly appreciated!

thanks!

2

What does that mean, exactly?

3

It's possible you have a style that is overwriting the rows and cols attribute.

4

Sergio Ruiz wrote:

i have noticed this a few times in the past, but right now, i need to get this fixed so that my form will fit inside a div..

i currently have this code:

<%= text_area @project, :description, :rows => "2", :cols => "20" %>

which should give me a 20x2 text area...

unfortunately, i get a huge text area..

the code that is generated is:

<textarea cols="20" id="project_description" name="project[description]" rows="2"></textarea>

I see nothing wrong with this. I even used Safari's Web Inspecting on the very text area I'm typing this response into. The text area size updated as expected.

Are you sure you don't have a CSS style-sheet that is overriding your rows and cols attributes on your text area?

Also note that Safari (not sure about Chrome) allows the user to resize text areas. Even so, Safari will still respect the rows and cols attributes as the starting size for text areas.

5

Tim Shaffer wrote:

It's possible you have a style that is overwriting the rows and cols attribute.

For my experience, it's better to not use rows and cols for dimensioning textareas, because the dimensions of the textarea will depend from the dimensions of the row and of the column, that rely to font properties and change from browser to browser; it would be a good choice to set dimensions with css (width and height, to be clear). Consider this:

<html> <head> </head> <body> <textarea cols="10" rows="10" style="font-size: 10px"></textarea><br> <textarea cols="10" rows="10" style="font-size: 20px"></textarea><br> </body> </html>

textareas dimensions are very different; this:

<html> <head> </head> <body> <textarea cols="10" rows="10" style="font-family: Arial"></textarea><br> <textarea cols="10" rows="10" style="font-family: Verdana"></textarea><br> </body> </html>

I obtain 136x208 vs 138x228; on Firefox, 79x164 vs 89x164 on Chromium

6

Tim Shaffer wrote:

It's possible you have a style that is overwriting the rows and cols attribute.

you guys are correct! i am using blueprint CSS with this site.. unfortunately, this box is not bounded by a span-# div, so it makes some assumptions about the width of the textarea tag.. one of them being a default width of 390px.

i overrode it in my main css, and everything is fine..

i didn't think that such things would be overridden.. but after taking a look at the code for screen.css, it really makes sense, and it's really smart..

thanks all!