Textarea interaction with bootstrap column

Question

I have a simple yet frustrating problem. I need to use textarea in a column so i placed it inside a row then a column like below code:

<div class="row"><div class="col-md-12">
    <table class="table table-bordered " id="RezAddress" >
   <tr>
    <th colspan="2" align="left">'.$menu[56].'</th>
    </tr>
  <tr>
    <td colspan="2" align="left"><textarea name="address" rows="3" id="address" style="min-width: 100%">'.$address.'</textarea></td>
    </tr>
  </table>
  </div></div>

So here i set textarea width as wide as column. Now what i wnat to do is i don't want that textarea overflow that column when i drag from corner.Is it possible? I tried max-width and with attributes as well. No solution so far.

I don't understand what's your problem, please explain more. — Jérémy Halin, Jan 14 '16 at 10:34
What i want to do is restrict only horizontally. It should still be resizeable vertically. — Atilla Arda Açıkgöz, Jan 14 '16 at 10:41
http://stackoverflow.com/questions/3899463/how-can-i-prevent-the-textarea-from-stretching-beyond-his-parent-div-element-g — Shrikant, Jan 14 '16 at 10:43
@Shrikant like i said i cheked tose solutions and did not worked for me. anyway i got the answer below thx to Midhun — Atilla Arda Açıkgöz, Jan 14 '16 at 10:47

Midhun Murali · Accepted Answer · 2016-01-14T10:44:38.600

You can set property css property resize:none for <textarea>

<div class="row"><div class="col-md-12">
    <table class="table table-bordered " id="RezAddress" >
   <tr>
    <th colspan="2" align="left">'.$menu[56].'</th>
    </tr>
  <tr>
    <td colspan="2" align="left"><textarea name="address" rows="3" id="address" style="min-width: 100%;resize:none">'.$address.'</textarea></td>
    </tr>
  </table>
  </div></div>

So for limiting it horizontal use resize:vertical

 <div class="row"><div class="col-md-12">
        <table class="table table-bordered " id="RezAddress" >
       <tr>
        <th colspan="2" align="left">'.$menu[56].'</th>
        </tr>
      <tr>
        <td colspan="2" align="left"><textarea name="address" rows="3" id="address" style="min-width: 100%;resize:vertical">'.$address.'</textarea></td>
        </tr>
      </table>
      </div></div>

Thanks for quick answer. But what i want to do is restrict only horizontally. It should still be resizeable vertically. If it won't be problem can you check it as well? — Atilla Arda Açıkgöz, Jan 14 '16 at 10:41

Textarea interaction with bootstrap column

1 Answers1