fix for issue #3

Author: 152hq

Changelog.md

@@ -9,13 +9,14 @@ The below format is based on [Keep a Changelog](http://keepachangelog.com/).
  - `headerText` config
 ### Fixed
  - An issue which returns || when save is pressed without selecting any values
+ - [FOR #3](https://github.com/152hq/QicForms/issues/3) DIV renders at top of page, irregardless of page scrolling
 
-## v1.1.100 - 2019-09-28
+## [1.1.100] - 2019-09-28
 ### Added
  - Base component
  - Minutes configuration
  - set and get value methods
 
-## v0.0.100 - 2019-08-15
+## [0.0.100] - 2019-08-15
 ### Added
  - Inital layout and configuration

dist/style.css

@@ -9,46 +9,28 @@
   --header-text-align: left;
   --header-bg: #414141; }
 
-.nj-overlay {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 2; }
-
 .nj-picker .nj-ampm-container {
   padding: 0 0.5em 0.5em 0.5em; }
   .nj-picker .nj-ampm-container .nj-ampm-wrapper {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     grid-gap: 0.5em; }
 
-.nj-picker .nj-action-container {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr); }
-  .nj-picker .nj-action-container .nj-action-button {
-    padding: 0.8em;
-    text-align: center;
-    color: #fff;
-    cursor: pointer; }
-  .nj-picker .nj-action-container .nj-action-save {
-    background: var(--save-button-bg);
-    color: var(--save-button-fc); }
-  .nj-picker .nj-action-container .nj-action-clear {
-    background: var(--clear-button-bg);
-    color: var(--clear-button-fc); }
-  .nj-picker .nj-action-container .nj-action-close {
-    background: var(--close-button-bg);
-    color: var(--close-button-fc); }
+.nj-overlay {
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(138, 67, 67, 0.5);
+  z-index: 2; }
 
 .nj-picker {
-  height: 100%;
-  width: 100%;
-  position: absolute;
+  height: 100vh;
+  width: 100vw;
+  position: fixed;
   top: 0;
   left: 0;
   display: none;
@@ -87,6 +69,24 @@
 .nj-picker-show {
   display: flex !important; }
 
+.nj-picker .nj-action-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); }
+  .nj-picker .nj-action-container .nj-action-button {
+    padding: 0.8em;
+    text-align: center;
+    color: #fff;
+    cursor: pointer; }
+  .nj-picker .nj-action-container .nj-action-save {
+    background: var(--save-button-bg);
+    color: var(--save-button-fc); }
+  .nj-picker .nj-action-container .nj-action-clear {
+    background: var(--clear-button-bg);
+    color: var(--clear-button-fc); }
+  .nj-picker .nj-action-container .nj-action-close {
+    background: var(--close-button-bg);
+    color: var(--close-button-fc); }
+
 .nj-picker .nj-header-container {
   padding: 0.8em;
   background: var(--header-bg);

dist/style.min.css

@@ -1,11 +1,11 @@
 .nj-overlay {
   position: fixed;
-  width: 100%;
-  height: 100%;
+  height: 100vh;
+  width: 100vw;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(138, 67, 67, 0.5);
   z-index: 2;
 }

package-lock.json

@@ -1,7 +1,7 @@
 .nj-picker {
-    height: 100%;
-    width: 100%;
-    position: absolute;
+    height: 100vh;
+    width: 100vw;
+    position: fixed;
     top: 0;
     left: 0;
     display: none;