CODEWITHSUNDEEP
jqueryjquery-pluginstextareahtml-table
Brian M. Hunt
Brian M. Hunt

Reputation: 83818

jQuery.expandingTextarea not working inside a table

When running the jQuery plugin bgrins/ExpandingTextareas (github), <textarea> tags inside 100%-width tables do not work as expected. In particular, the textarea does not expand vertically as desired, and the horizontal position of the textarea has an incorrect offset that changes as one inputs text.

Here is a sample jsFiddle illustrating the problem.

I have also opened a corresponding issue, #33 on GitHub.

Any thoughts on why this is happening and how to remedy it would be most appreciated.

Upvotes: 0

Views: 356

Answers (1)

Udit Bhardwaj
Udit Bhardwaj

Reputation: 1781

please refer to this answer for the issue related to textarea inside table cell.

below is what i hope is the solution of your problem

DEMO

html

<table border="1">
<tr>
    <td>One</td>
    <td>Two</td>
    <td id="expand"><textarea placeholder="type here"></textarea></td>
</tr>

css

table {
width: 100%;
table-layout: fixed;
}

textarea {
border: none;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

}

script

$("textarea").expandingTextarea({
  resize: function() //callback
  {
     var i=$('textarea').height();

   //inspect the textarea and cell containing it, height difference is 4.

     $('#expand').attr('height',i+4+'px');   
  }
})

Upvotes: 2

Related Questions