How to make input text bigger in bootstrap css framework?

Question

I have a bootstrap textbox like this:

 <input type="text" class="span9" required name="input_text"/>

I want my input box to be of height 300px. For the width, span9 handles it. I used Inspect element in Chrome and overwrite the css like this:

input.span9, textarea.span9, .uneditable-input.span9 {
width: 852px;
height: 300px;

The text box looks good with the required height and width. But the problem is I can only type in the small portion in between the large text box. I want user to be able to type in the whole text box and even if textbox is not enough, I want to show the scrolling. How's that possible?

Oh yes, How could I miss that? I should use textarea? Can I pass the value of textarea into function using simple form like I do with the input box? — pynovice
– pynovice, Commented Mar 29, 2013 at 16:15
Yes, you can pass it just the same. I'll post this as an answer. — woz
– woz, Commented Mar 29, 2013 at 16:19

woz · Accepted Answer · 2013-03-29 16:20:02Z

5

Per my comment, it's a quick fix. Use a <textarea> instead of <input> and it will function the way you described.

answered Mar 29, 2013 at 16:20

woz

11.1k3 gold badges37 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rick Buczynski · Accepted Answer · 2013-03-29 16:14:15Z

0

Based on your question, it sounds like the issue has to do with CSS font-size and/or line-height properties.

An input[text] element will inherit font-size and line-height properties from its parent or else the user agent settings.

Try this:

input.span9, textarea.span9, .uneditable-input.span9 {
width: 852px;
height: 300px;
font-size:92px;
line-height:92px;
}

http://jsfiddle.net/xvznz/3/

As far as "show the scrolling," that's not possible for a standard input[text]. But the above example shows scrolling as you would expect from a textarea element.

So your solution is to tweak font-size and/or line-height CSS properties.

answered Mar 29, 2013 at 16:14

Rick Buczynski

8378 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to make input text bigger in bootstrap css framework?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related