textare a doesn't resize when I change “cols” parameter

Question

I have a textarea that i'd like to shrink in width: but no matter what I set the cols= parameter to, the textarea keeps its width. Why is this? The code looks like

<textarea id="edit-submitted-question-request" name="submitted[question_request]" cols="10" rows="5" class="form-textarea required"></textarea>

and it can be found here: http://quaaoutlodge.com/content/dinner-theatre-rock-romance

EDIT A

I commented out width: 100%; in .form-textarea-wrapper textarea in my css and now the textarea renders to the right size but the "resize bar" to extend the text area is still at 100%, why is this?

Answer 1

Found a class in your css that makes problems for your textarea size:

.form-textarea-wrapper textarea {
  display: block;
  margin: 0;
  width: 100%; // <----- Thats the problem
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

width from that class is affecting on textareas. check your css file /system.base.css?nipcyw

Answer 2

you are using one div for the textarea in which you have set width as 100%, Please remove that width part then your cols=parameter will start working.

.form-textarea-wrapper textarea {
display: block;
margin: 0;
/* -------- width: 100%; ------- */ 
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}