Fix Date pickerAlignment in notes modal

Bahmni · Jul 27, 2023 · a9d925e · a9d925e
1 parent 9ea001c
commit a9d925e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 12 deletions.
diff --git a/ui/app/ot/views/notesModal.html b/ui/app/ot/views/notesModal.html
@@ -7,18 +7,21 @@ <h6>{{'NOTE_TITLE' | translate}}</h6>
             <div class="error">
                 <div ng-if="emptyNoteError">{{'EMPTY_NOTES_ERROR' | translate }}</div>
             </div>
-            <div style="display: inline-block; margin-right: 20px">
-                <h6 style="color: black">{{'FROM' | translate}}</h6>
-                <input class="calendar-day-input ng-pristine ng-untouched ng-valid ng-valid-required" id="notesStartDate" type="date"
-                       min="{{validStartDate | date:'yyyy-MM-dd'}}" max="{{validEndDate | date:'yyyy-MM-dd'}}"
-                       ng-model="notesStartDate" required="" ng-change="setNotesStartDate(notesStartDate)"  ng-disabled="isEdit || isDayView">
-            </div>
-            <div style="display: inline-block">
-                <h6 style="color: black">{{'TO' | translate}}</h6>
-                <input class="calendar-day-input ng-pristine ng-untouched ng-valid ng-valid-required" id="notesEndDate" type="date"
-                       min="{{validStartDate | date:'yyyy-MM-dd'}}" max="{{validEndDate | date:'yyyy-MM-dd'}}"
-                       ng-model="notesEndDate" required="true" ng-change="setNotesEndDate(notesEndDate)" ng-disabled="isEdit || isDayView">
+            <div class="date-selector" >
+                <div>
+                    <h6 style="color: black">{{'FROM' | translate}}</h6>
+                    <input class="calendar-day-input ng-pristine ng-untouched ng-valid ng-valid-required" id="notesStartDate" type="date"
+                           min="{{validStartDate | date:'yyyy-MM-dd'}}" max="{{validEndDate | date:'yyyy-MM-dd'}}" style="width: 100%"
+                           ng-model="notesStartDate" required="" ng-change="setNotesStartDate(notesStartDate)"  ng-disabled="isEdit || isDayView">
+                </div>
+                <div>
+                    <h6 style="color: black">{{'TO' | translate}}</h6>
+                    <input class="calendar-day-input ng-pristine ng-untouched ng-valid ng-valid-required" id="notesEndDate" type="date"
+                           min="{{validStartDate | date:'yyyy-MM-dd'}}" max="{{validEndDate | date:'yyyy-MM-dd'}}" style="width: 100%"
+                           ng-model="notesEndDate" required="true" ng-change="setNotesEndDate(notesEndDate)" ng-disabled="isEdit || isDayView">
+                </div>
             </div>
+
             <div ng-if="startDateBeforeEndDateError" class="error">
                 {{'FROM_DATE_BEFORE_TO_DATE_ERROR' | translate}}
             </div>

diff --git a/ui/app/styles/ot/_otWeeklyCalendar.scss b/ui/app/styles/ot/_otWeeklyCalendar.scss
@@ -109,9 +109,17 @@
         display: inline-block;
         color: #000;
       }
+      .date-selector{
+        display: flex;
+        gap: 20px;
+        > div {
+          width: 45%;
+          display: inline-block
+        }
+      }
       button{
         height: 64px;
-        width: 50%;
+        min-width: 50%;
         color: white;
         border: none;
         border-radius: 0;