bgrins/ExpandingTextareas — pull request #37 by domchristie (2014-01-25 23:53:30+00:00)
Title: Fix height issues

This PR fixes various height issues by getting the dimensions and positioning of the clone to match those of the textarea.

In order to achieve this, the following styles have been applied to the textarea (as on the original alistapart article):

- `box-sizing: border-box`
- `width: 100%`
- `margin: 0`

The `box-sizing` and `width` declarations make the textarea behave more like a block-level element, and therefore more predictable and easier to clone.

The `margin: 0` declaration ensures that the textarea and clone occupying the same coordinates (relative to the document). If `margin: Xpx` is applied to the textarea, it will always be distanced from its parent by `Xpx`, because it is absolutely positioned. If the same style is applied to the clone, it does not behave in the same way: the margin “breaks out” of the container. This results in discrepancies between the textarea and clone positions, which should be avoided and can be achieved with `margin: 0`.

Here is a demo of the current plugin (taken from the master branch): http://jsbin.com/uSiNuzel/2/edit (there is a short delay to simulate slow JS loading)

You can see that:

- The clone (pink) is full width, meaning textarea expansions will be delayed
- The `rows` attribute has no effect (#27), causing the textarea to shrink when plugin initialised
- The textarea moves up a little, due to margin behaviour

The same demo with the proposed changes: http://jsbin.com/ugAsejed/2/edit which fixes the bugs above.

The tests pass in the latest versions of Chrome, Safari, Opera, Firefox, and IE 9, 10, and 11. One test fails in IE8, but the plugin appears to work (manual testing). The tests do not run in IE7.

I’ve updated the readme and demo to reflect these changes, though I do feel that there could be more CSS guidance e.g. avoiding margins.