Columns won't set in a textarea

Question

This is miserably mysterious. I have a form with a textarea field. I've removed decorators and all that, and I setAttribs with rows and cols (developing in Zend Framework). The textarea continues to be extremely wide, spilling out of its container and outside the viewport. I can add a screenshot if necessary.

Here's the basic code:

<form id="edit-pending-email" enctype="application/x-www-form-urlencoded" method="post" action="[path]/email/edit-pending-email/">

<label for="salutation" class="optional">Salutation</label>

<input type="text" name="salutation" id="salutation" value="Yo" /> <p><label for="content" class="optional">Body of Email</label>

<textarea name="content" id="content" cols="40" rows="30"> blah blah ... text goes here ...

</textarea></p>

<input type="submit" name="save" id="save" value="Save" />

<input type="submit" name="cancel" id="cancel" value="Cancel" /></form>

Here are the oddities.

1. If I change the rows value, the rows change. If I change the cols value, nothing changes. But the rows do change, so I know the syntax is correct, and anyway I crossed checked with other developers. They don't know what's going on either.
2. If I copy the code and paste it into a simple html page, the textarea sizes correctly

I have looked in the CSS (it shouldn't matter, but I checked) and there's no reference to cols and the only width references are to other elements. In short, there is absolutely no reason why the cols setting is behaving the way it is.

And yet, it is.

Myrlemyrlene

Oh crud. The code didn't paste. Let' – Myrlemyrlene

If you use Chrome, right click on the textarea and click Inspect Element to get a breakdown of all the computed style characteristics for the field. – Colvert

@James or Firebug in Firefox. @Skip Everything you've posted so far points to CSS. – Innumerable

Thanks for the comments. I had already looked at that. cols="40" and rows="30" are right there in the textarea tag. The rules of CSS inheritance say that these settings should override anything in the stylesheet. In any case, as I stated in the original post, I have already thoroughly inspected the stylesheet and there are no width settings associated with either textarea or form. – Myrlemyrlene

Doh. Not used to this editor. I was just going to say that I agree that it sounds like a style issue, but I cannot pin it down to that. From the php side, is there anything amiss in the code I posted? Or does that all look right? I'm much more of a novice at php (Zend) than I am with CSS, which I've been hip-deep in for many years. – Myrlemyrlene

Answer 1

After setting width: auto, the cols attribute works for me (at least in Chrome, I didn't test other browsers yet).

textarea {
  width: auto; 
}

Hoot

As Chrome is basically Webkit (for now), this works in Safari too. – Delanos

Answer 2

I finally tracked this one down. It was indeed in the stylesheet. That is, it wasn't in the stylesheet, but should have been.

Turns out, for reasons I do not understand, a textarea (applies to other elements too) wants to expand to its maximum, regardless of what cols says. This makes no sense to me but there it is.

The way to fix this is to set max-width. As soon as I did that, the element behaved and sized to the proper width. Note: width doesn't do it. Only max-width works.

Geez.

Myrlemyrlene

Answer 3

try setting max-width to : whatever you want in % for exp(60%).that should do it

Philbrick