Question

My form inherits several css styles, and the default display for a textarea only has a single row– if you type a paragraph it won’t wrap but continues going one the same line. How do I force it back to multi-row output? I have set the “rows” and “cols” attributes in the HTML but it doesn’t seem to do anything.

The HTML is highly nested, but the actual input element is:

<input name="input47" type="textarea" rows="3" cols="10" />

The CSS I’ve tried is:

body form ol.sections li ol.prompts li ol.entries li ol.inputs li input[type=textarea] {
  height: 500px !important;
  white-space: normal !important;
}

The 500px works regardless whether or not I use !important, but there is only a single line of text in the textarea, vertically centered (Chrome and Safari).

EDIT: Clearly I need to brush up on my HTML– <input type="textarea"> should have been <textarea>

Answer 1

You misuse <input /> element here. What you want to get is

<textarea name="input47" rows="3" cols="10">
        Your multiline text is here.
    </textarea>