multiline html textarea

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>

Solution 1

@macaroon5, you misuse <input /> element here. What you want to get is

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

Here is the example

Solution 2

I assume you have something like

white-space: nowrap;

applied to your textarea somewhere in your stylesheet and that's what makes it render the whole chunk of text in one line.

Just add something like

textarea#myfield {
    white-space: normal
}

There should be no need for !important in the style above, but if you don't get the result, you can try !important

Solution 3

please be aware that except of rows and cols you might also set height and width, which would affect it. It might be the case that you sets rows, but css property height overwrites it.