fix for issue #3

Author: nj-coder

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
- 
-## v1.1.100 - 2019-09-28
+ - [FOR #3](https://github.com/nj-coder/nj-timepicker/issues/3) DIV renders at top of page, irregardless of page scrolling
+
+## [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

@@ -16,10 +16,21 @@
     grid-template-columns: repeat(6, 1fr);
     grid-gap: 0.5em; }
 
+.nj-overlay {
+  height: 100vh;
+  width: 100vw;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 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;
@@ -58,17 +69,6 @@
 .nj-picker-show {
   display: flex !important; }
 
-.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-action-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr); }

dist/style.min.css

@@ -1,7 +1,7 @@
 .nj-overlay {
+  height: 100vh;
+  width: 100vw;
   position: fixed;
-  width: 100%;
-  height: 100%;
   top: 0;
   left: 0;
   right: 0;

src/background/background.scss

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