demo: How to prevent elements pushing down issue?

Author: SaeedDev94

src/app/demo/demo.component.html

@@ -51,6 +51,14 @@
           <span>Year</span>
         </label>
       </div>
+      <div class="switch">
+        <p>Is visible?</p>
+        <label>
+          <input type="checkbox"
+                 [(ngModel)]="uiIsVisible" />
+          <span class="lever"></span>
+        </label>
+      </div>
       <div class="switch">
         <p>Hide after select date</p>
         <label>
@@ -103,23 +111,27 @@
       </div>
     </div>
     <div class="col offset-l2 l4 offset-m3 m6 offset-s2 s8">
-      <ng-persian-datepicker (dateOnSelect)="onSelect($event)"
-                             [dateFormat]="'YYYY/MM/DD HH:mm:ss'"
-                             [dateGregorianFormat]="'YYYY-MM-DD HH:mm:ss'"
-                             [(uiIsVisible)]="uiIsVisible"
-                             [uiTheme]="uiTheme"
-                             [uiYearView]="uiYearView"
-                             [uiMonthView]="uiMonthView"
-                             [uiHideAfterSelectDate]="uiHideAfterSelectDate"
-                             [uiHideOnOutsideClick]="uiHideOnOutsideClick"
-                             [uiTodayBtnEnable]="uiTodayBtnEnable"
-                             [timeEnable]="timeEnable"
-                             [timeShowSecond]="timeShowSecond"
-                             [timeMeridian]="timeMeridian">
-        <div class="input-field">
-          <input type="text" [formControl]="dateValue" aria-label="Datepicker Input" />
-        </div>
-      </ng-persian-datepicker>
+      <div class="datepicker-wrapper">
+        <ng-persian-datepicker (dateOnSelect)="onSelect($event)"
+                               [dateFormat]="'YYYY/MM/DD HH:mm:ss'"
+                               [dateGregorianFormat]="'YYYY-MM-DD HH:mm:ss'"
+                               [(uiIsVisible)]="uiIsVisible"
+                               [uiTheme]="uiTheme"
+                               [uiYearView]="uiYearView"
+                               [uiMonthView]="uiMonthView"
+                               [uiHideAfterSelectDate]="uiHideAfterSelectDate"
+                               [uiHideOnOutsideClick]="uiHideOnOutsideClick"
+                               [uiTodayBtnEnable]="uiTodayBtnEnable"
+                               [timeEnable]="timeEnable"
+                               [timeShowSecond]="timeShowSecond"
+                               [timeMeridian]="timeMeridian">
+          <div class="input-field">
+            <input type="text" [formControl]="dateValue" aria-label="Datepicker Input" />
+          </div>
+        </ng-persian-datepicker>
+      </div>
+      <h5>How to prevent elements pushing down issue?</h5>
+      <b>Check ".datepicker-wrapper" global css class in <a href="https://github.com/Saeed-Pooyanfar/ng-persian-datepicker/blob/master/src/styles.scss">styles.scss</a></b>
     </div>
   </div>
 </div>

src/styles.scss

@@ -1,13 +1,39 @@
 @import "assets/css/iran-sans-web.font.css";
 @import "assets/css/materialize.min.css";
 
+:root {
+  --input-height: 46px;
+  --input-vertical-margin: 16px;
+}
+
 body {
   font-family: 'IranSansWebRegular', serif;
 }
 
 input {
   font-family: inherit;
   &[type="text"] {
-    margin-bottom: 0!important;
+    &:not(.browser-default) {
+      box-sizing: border-box;
+      margin: 0;
+      height: var(--input-height);
+    }
+  }
+}
+
+.input-field {
+  margin-top: var(--input-vertical-margin);
+  margin-bottom: var(--input-vertical-margin);
+}
+
+.datepicker-wrapper {
+  position: relative;
+
+  ng-persian-datepicker .datepicker-outer-container {
+    position: absolute;
+    z-index: 1;
+    top: calc(var(--input-height) + var(--input-margin-bottom));
+    right: 0;
+    left: 0;
   }
 }