feat(demo): adding demo showcasting new top and bottom borders size support

Author: chrum

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-autosize-app",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "homepage": "https://chrum.it/pages/ngx-autosize",
   "description": "Directive that automatically adjusts textarea height to fit content",
   "repository": {

projects/autosize/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-autosize",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "homepage": "https://chrum.it/pages/ngx-autosize",
   "description": "Directive that automatically adjusts textarea height to fit content",
   "repository": {

projects/autosize/src/lib/autosize.directive.ts

@@ -132,9 +132,10 @@ export class AutosizeDirective implements OnDestroy, OnChanges, AfterContentChec
             let height = clone.scrollHeight;
 
             // add into height top and bottom borders' width
-            let computedStyle = window.getComputedStyle(clone, null);           
-            height += parseInt(computedStyle.getPropertyValue('border-top-width')) + parseInt(computedStyle.getPropertyValue('border-bottom-width'));
-            
+            let computedStyle = window.getComputedStyle(clone, null);
+            height += parseInt(computedStyle.getPropertyValue('border-top-width'));
+            height += parseInt(computedStyle.getPropertyValue('border-bottom-width'));
+
             const willGrow = height > this.textAreaEl.offsetHeight;
 
             if (this.onlyGrow === false || willGrow) {

src/app/app.component.html

@@ -73,3 +73,16 @@ <h3>
 
 <hr/>
 
+<div>
+    <h3>Top and bottom borders <strong>15px</strong> of width</h3>
+    <textarea autosize class="top-and-bottom-borders">1. Here this textarea
+    2. should show all 4 lines
+    3. as it respects top
+    4. and bottom borders
+    5. otherwise this fifth line would have been hidden</textarea>
+</div>
+
+<hr/>
+
+
+

src/app/app.component.scss

@@ -4,4 +4,9 @@ textarea {
   &.forceImportant {
     height: auto !important
   }
+
+  &.top-and-bottom-borders {
+    border-top-width:15px;
+    border-bottom-width:15px
+  }
 }