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.

jkyadav
  • 1,214
  • 5
  • 18
  • 32
  • I have edited my question and posted actual code – jkyadav Aug 12 '15 at 12:16
  • Let me clarify I don't want to make any changes in bootstrap css, please post some other possible options. – jkyadav Aug 12 '15 at 12:20
  • 1
    Your code takes 100% even without modifying. What is the problem with that? – m4n0 Aug 12 '15 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. – jkyadav Aug 12 '15 at 12:33
  • I will setup fiddle and try to explain my problem there. – jkyadav Aug 12 '15 at 12:44

4 Answers4

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.

Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
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>
m4n0
  • 29,823
  • 27
  • 76
  • 89
  • 1
    I deleted the answer because I did not use inbuilt Bootstrap class but saw down votes on other answers too. What's going on? – m4n0 Aug 12 '15 at 12:12
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%;
}
Stanimir Dimitrov
  • 1,872
  • 2
  • 20
  • 25
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%;
}
Ivin Raj
  • 3,448
  • 2
  • 28
  • 65