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/3/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 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 and FOUC
jQuery was updated to the latest version, as there were some issues with min-height calculations in 1.7, and some failing tests re: destroy in 1.8. Test pass with jQuery 1.9, and so it is listed as a dependency in the readme.
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-boxwidth: 100%margin: 0The
box-sizingandwidthdeclarations make the textarea behave more like a block-level element, and therefore more predictable and easier to clone.The
margin: 0declaration ensures that the textarea and clone occupying the same coordinates (relative to the document). Ifmargin: Xpxis applied to the textarea, it will always be distanced from its parent byXpx, 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 withmargin: 0.Here is a demo of the current plugin (taken from the master branch): http://jsbin.com/uSiNuzel/3/edit (there is a short delay to simulate slow JS loading)
You can see that:
rowsattribute has no effect (#27), causing the textarea to shrink when plugin initialisedThe 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 and FOUC
jQuery was updated to the latest version, as there were some issues with min-height calculations in 1.7, and some failing tests re:
destroyin 1.8. Test pass with jQuery 1.9, and so it is listed as a dependency in the readme.