Fix dropdowns on the bottom of a page (#2212)

assets/js/plugins/KimaiDatatable.js

@@ -35,6 +35,8 @@ export default class KimaiDatatable extends KimaiPlugin {
         const attributes = dataTable.dataset;
         const events = attributes['reloadEvent'];
 
+        this.fixDropdowns();
+
         if (events === undefined) {
             return;
         }
@@ -55,6 +57,7 @@ export default class KimaiDatatable extends KimaiPlugin {
     }
 
     reloadDatatable() {
+        const self = this;
         const contentArea = this.contentArea;
         const durations = this.getContainer().getPlugin('timesheet-duration');
         const toolbarSelector = this.getContainer().getPlugin('toolbar').getSelector();
@@ -79,6 +82,7 @@ export default class KimaiDatatable extends KimaiPlugin {
                     jQuery(html).find(contentArea)
                 );
                 durations.updateRecords();
+                self.fixDropdowns();
             },
             error: function(xhr, err) {
                 form.submit();
@@ -86,4 +90,21 @@ export default class KimaiDatatable extends KimaiPlugin {
         });
 
     }
+
+    /**
+     * show dropdown menu upwards, if it is outside the visible viewport
+     */
+    fixDropdowns() {
+        const docHeight = jQuery(document).height();
+        jQuery(this.selector + ' [data-toggle=dropdown]').each(function() {
+            const parent = jQuery(this).parent();
+            const menu = parent.find('.dropdown-menu');
+
+            if (parent && menu) {
+                if ((parent.offset().top + parent.outerHeight() + menu.outerHeight()) > docHeight) {
+                    parent.addClass('dropup').removeClass('dropdown');
+                }
+            }
+        });
+    }
 }

public/build/entrypoints.json

@@ -5,7 +5,7 @@
         "build/runtime.098eaae1.js",
         "build/0.79dbdbb9.js",
         "build/1.32489d92.js",
-        "build/app.315842a2.js"
+        "build/app.17db5739.js"
       ],
       "css": [
         "build/app.0325b7e0.css"
@@ -53,7 +53,7 @@
     "build/runtime.098eaae1.js": "sha384-xNNrNinl64G3nCUrIskgSjU0mUXXCB9lj6XCSInBTwxSKXk8uTMafnLHtdWdIGtd",
     "build/0.79dbdbb9.js": "sha384-U2Ao0ORAZ8PCeDmyRsqQFET3hc7pfUBimq0PrqFdG4/s0Bdi+qBj4TJK3o70bCd5",
     "build/1.32489d92.js": "sha384-wVkjh5FzjFhMV4S4uNP23E/OLBOf+Zi7t3lpm9eWzoMr/tm2pydT+q0Op1XHuoUP",
-    "build/app.315842a2.js": "sha384-xnD2g2j1MlHVgVT5H5I4RY+Rp/eNtN6gSzUONlOEDn4oJyJyos74BA784daLowNM",
+    "build/app.17db5739.js": "sha384-FiGSZja8Gi5tNB7+8OMsNlMB/FXYWmBap7C18it7wJ2dkioX3MRHUkUrjCF2vvKa",
     "build/app.0325b7e0.css": "sha384-+e2X/+hgWNDL4q30jFlPjC+jD61G/j9nsyn+KO57Pakrq5XH5sjMuamVPtwgnDlG",
     "build/invoice.74279541.js": "sha384-2BXic5Sgorf2tXai6zSAN4wLY2dbg06L03/xMKW6itMcszvtnRArKzfBh6DNcF3f",
     "build/invoice.13d8ef4e.css": "sha384-B6RN/wZJToSBCZk2JeLokIqWEhbh+Eb9arYbt9dM+YoC2Z6PnCeTwTqSGyexWWJh",

public/build/manifest.json

@@ -3,7 +3,7 @@
   "build/1.32489d92.js": "build/1.32489d92.js",
   "build/2.7ab75d0a.js": "build/2.7ab75d0a.js",
   "build/app.css": "build/app.0325b7e0.css",
-  "build/app.js": "build/app.315842a2.js",
+  "build/app.js": "build/app.17db5739.js",
   "build/calendar.css": "build/calendar.1408f57e.css",
   "build/calendar.js": "build/calendar.541a15eb.js",
   "build/chart.js": "build/chart.34d60a88.js",