CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Leahcim
Leahcim

Reputation: 41929

Adding rows and columns to a form

I'm building a website using Twitter's Bootstrap.css. It comes with some helpful preset html/css classes. For example, if you create a form with <input class="xlarge"> it will come with a wider than normal width. However, the default form input box was only one row, so I added some css to make it a taller box.

.input-xlarge,
input.xlarge {
  height: 70px;
}

So now there's a bigger text area, but the problem is, when you go to type something in, the bigger area isn't accessible to the cursor. You still only have one "row" to enter text on. I tried to add some rows and columsn in the hmtl but it didn't change anything

<div class="textarea">
 <input class="xlarge" id="xlInput3" name="xlInput3"  type="text" rows="2" columns="70"> 
            </div>

You can see a fiddle of the problem here. Any idea how to fix this?

http://jsfiddle.net/mjmitche/CDQ89/6/

Upvotes: 1

Views: 6093

Answers (2)

Interrobang
Interrobang

Reputation: 17434

An <input /> will always be only one line. If you want a multiple-line input area, you need to use <textarea></textarea>.

Upvotes: 1

andrewk
andrewk

Reputation: 3871

Inputs are only one row. Textarea is multiple rows. Check this out. http://jsfiddle.net/CDQ89/7/

Upvotes: 3

Related Questions