Save button now will always be visible on the create event page.

app/static/css/createEvent.css

@@ -55,3 +55,8 @@
     background-color: #fff
   }
 
+.fixedButton {
+    position: fixed;
+    right: 1.5rem;
+    bottom: 1.5rem;
+}

app/static/js/createEvents.js

@@ -167,6 +167,23 @@ function verifyRepeatingFields(){
   return isEmpty
 }
 
+/*
+ * Update the position of the Save button so that it is always on the screen as 
+ * the window scrolls and changes size. The position on the screen is determined 
+ * in the fixedButton class */
+const saveBtn = $('#saveButton');
+function updateSavePosition() {
+  const originalTop = saveBtn.parent()[0].getBoundingClientRect().top; // relative to scroll
+  const buttonHeight = 40;
+
+  if ($(window).height() < originalTop + buttonHeight) {
+    saveBtn.addClass('fixedButton');
+  } else {
+    saveBtn.removeClass('fixedButton');
+  }
+}
+$(window).on('scroll resize load', updateSavePosition);
+
 $('#saveSeries').on('click', function(e) {
   e.preventDefault(); // Prevent default form submission at the start
   enableLiveCustomValidityClearing([".multipleOfferingNameField"])
@@ -393,6 +410,9 @@ function updateOfferingsTable() {
                                   "</tr>"
                                 );
   });
+
+  //recalculate the save button
+  updateSavePosition()
 }
 
 //visual date formatting for multi-event table
@@ -803,4 +823,3 @@ function handleTimeFormatting(timeArray){
 
 
 
-

app/templates/events/createEvent.html

@@ -322,7 +322,7 @@ <h1 id="pageTitle">{{page_title}}</h1>
         <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#renewWarning">Renew
           Event</button>
         {% endif %}
-        <input type="button" class="btn btn-primary saveBtn" id="saveButton" value="Save" />
+        <input type="button" class="btn btn-primary" id="saveButton" value="Save" />
       </div>
     </div>
   </div>