2

I am using bootstrap to design the webpage and there is textarea under div element as below code.

<div class="tab-pane" id="orange"> <div class="col-md-12"> <div class="row"> <div class="col-md-12 col-md-offset-0"> <div class="form-group"> <textarea name="taskDescription" rows="2" class="form-control" id="txtDescription" required="required"></textarea> </div> </div> </div> </div>

I want to make textarea to take the parent elements width automatically, I tried using inherit width but that doesn't help.

How to accomplish this, please help me.

Improve this question
5
  • I have edited my question and posted actual code Commented Aug 12, 2015 at 12:16
  • Let me clarify I don't want to make any changes in bootstrap css, please post some other possible options. Commented Aug 12, 2015 at 12:20
  • 1
    Your code takes 100% even without modifying. What is the problem with that? Commented Aug 12, 2015 at 12:22
  • People started down-voting, they should wait at least my reply upon duplicate link, I did not find the solution that's why I have posted question over here, even tested below answers that working on fiddle but not working in my code. Commented Aug 12, 2015 at 12:33
  • I will setup fiddle and try to explain my problem there. Commented Aug 12, 2015 at 12:44

4 Answers 4

Reset to default
12

Just use .form-control class, that's integrated in bootstrap

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" /> <div class="col-md-12"> <textarea rows="2" class="form-control"></textarea> </div>

It setup the 100% width of the parent div.

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

Comments

1

Setting width: 100% will take full width of the parent.

textarea { width: 100%; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" /> <div class="col-md-12"> <textarea rows="2"></textarea> </div>

Improve this answer

1 Comment

I deleted the answer because I did not use inbuilt Bootstrap class but saw down votes on other answers too. What's going on?
0

Here you go. http://jsfiddle.net/mjh8jme7/ The textarea inherit the width of the div and it will not overflow.

<div class="col-md-12"> <textarea rows="2"></textarea> </div> .col-md-12 textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: inherit; } .col-md-12 { width:100%; }
Improve this answer

Comments

0

width: 100% will take full width of the parent.

<div class="col-md-12"> <textarea rows="2"></textarea> </div>

Css File

textarea { width: 100%; }
Improve this answer

2 Comments

I don't want to edit bootstrap css.
Plz refer this jsfiddle.net/Z4CyF/7

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.