made Layout styles position-relative

Author: HelpfulScripts

.gitignore

@@ -1576,7 +1576,7 @@
 							"sources": [
 								{
 									"fileName": "view/PillaredLayouter.ts",
-									"line": 290,
+									"line": 291,
 									"character": 38
 								}
 							],
@@ -1598,7 +1598,7 @@
 							"sources": [
 								{
 									"fileName": "view/PillaredLayouter.ts",
-									"line": 291,
+									"line": 292,
 									"character": 31
 								}
 							],
@@ -2141,7 +2141,7 @@
 					"sources": [
 						{
 							"fileName": "view/PillaredLayouter.ts",
-							"line": 290,
+							"line": 291,
 							"character": 13
 						}
 					],
@@ -2995,7 +2995,7 @@
 							"sources": [
 								{
 									"fileName": "view/PillaredLayouter.ts",
-									"line": 351,
+									"line": 352,
 									"character": 35
 								}
 							],
@@ -3017,7 +3017,7 @@
 							"sources": [
 								{
 									"fileName": "view/PillaredLayouter.ts",
-									"line": 352,
+									"line": 353,
 									"character": 31
 								}
 							],
@@ -3560,7 +3560,7 @@
 					"sources": [
 						{
 							"fileName": "view/PillaredLayouter.ts",
-							"line": 351,
+							"line": 352,
 							"character": 10
 						}
 					],

.travis.yml

@@ -402,7 +402,8 @@ <h1>
 <a name='L354'></a><a href='#L354'>354</a>
 <a name='L355'></a><a href='#L355'>355</a>
 <a name='L356'></a><a href='#L356'>356</a>
-<a name='L357'></a><a href='#L357'>357</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L357'></a><a href='#L357'>357</a>
+<a name='L358'></a><a href='#L358'>358</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -627,6 +628,7 @@ <h1>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">15x</span>
 <span class="cline-any cline-yes">45x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -983,7 +985,8 @@ <h1>
         let f = this.fields;
         let styles:descriptor[] = this.unit(components.length);
         components.map((c:Layout|Vnode, i:number) =&gt; {
-            c.style = `${f[0]}:0%; ${f[1]}:0%; `;
+            // c.style = `${f[0]}:0%; ${f[1]}:0%; `;
+            c.style = `${f[4]}:100%;`;
             Object.keys(styles[i].fields).forEach((st:string) =&gt; { c.style += `${st}: ${styles[i].fields[st]};`; });
         });   
         return this.cssClass;

.vscode/tasks.json

@@ -402,7 +402,8 @@ <h1>
 <a name='L354'></a><a href='#L354'>354</a>
 <a name='L355'></a><a href='#L355'>355</a>
 <a name='L356'></a><a href='#L356'>356</a>
-<a name='L357'></a><a href='#L357'>357</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L357'></a><a href='#L357'>357</a>
+<a name='L358'></a><a href='#L358'>358</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -627,6 +628,7 @@ <h1>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">15x</span>
 <span class="cline-any cline-yes">45x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -983,7 +985,8 @@ <h1>
         let f = this.fields;
         let styles:descriptor[] = this.unit(components.length);
         components.map((c:Layout|Vnode, i:number) =&gt; {
-            c.style = `${f[0]}:0%; ${f[1]}:0%; `;
+            // c.style = `${f[0]}:0%; ${f[1]}:0%; `;
+            c.style = `${f[4]}:100%;`;
             Object.keys(styles[i].fields).forEach((st:string) =&gt; { c.style += `${st}: ${styles[i].fields[st]};`; });
         });   
         return this.cssClass;

LICENSE

@@ -2,7 +2,7 @@
   "name": "hslayout",
   "main": "./index.js",
   "types": "./index.d.ts",
-  "version": "2.4.11",
+  "version": "2.4.12",
   "keywords": [
     "layout",
     "UI",

README.md

@@ -11,6 +11,9 @@ function hsCamelCase(name) {
 }
 
 const webpackExternals = {
+    // hsutil:         'hsutil',
+    // hslayout:       'hslayout',
+    // hswidget:       'hswidget',
     fs:             'fs',           // node.fs
     path:           'path',         // node.path
     url:            'url',          // node.url

docs/data/hsLayout.json

@@ -1,10 +1,22 @@
 @LayoutSpacing: 0px solid white;
 
 .hs-layout {
-    left: 0%; top: 0%;
+    position: absolute; 
+    &.hs-column-layout {
+        position: relative; 
+        left: 0%; 
+    }
+    &.hs-row-layout {
+        position: relative; 
+        top: 0%;
+    }
+    &.hs-tile-layout {
+        position: relative; 
+        left: 0%;
+        top: 0%;
+    }
     width:100%; 
     height:100%;
-    position: absolute; 
     display: block;
     overflow: scroll;
 //    border: 0;

docs/data/src/hsLayout/coverage/lcov-report/src/view/PillaredLayouter.ts.html

@@ -223,7 +223,8 @@ abstract class PillarLayouter extends Layouter{
         let f = this.fields;
         let styles:descriptor[] = this.unit(components.length);
         components.map((c:Layout|Vnode, i:number) => {
-            c.style = `${f[0]}:0%; ${f[1]}:0%; `;
+            // c.style = `${f[0]}:0%; ${f[1]}:0%; `;
+            c.style = `${f[4]}:100%;`;
             Object.keys(styles[i].fields).forEach((st:string) => { c.style += `${st}: ${styles[i].fields[st]};`; });
         });   
         return this.cssClass;