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');
+                }
+            }
+        });
+    }
 }