Form: make it scrollable when the its bigger than the viewport

fixes zammad#978
nunzilor · Jul 2, 2021 · 61975af · 61975af
1 parent 26b9eb0
commit 61975af
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/public/assets/form/form.css b/public/assets/form/form.css
@@ -34,6 +34,7 @@
     height: 100%;
     text-align: center;
     z-index: 999;
+    overflow: auto;
 }
 
 .zammad-form-modal:before {
@@ -61,7 +62,7 @@
     padding: 24px 24px 22px;
     width: 90%;
     max-width: 26em;
-    margin: 0 auto;
+    margin: 20px auto;
     box-sizing: border-box;
     position: relative;
     display: inline-block;

diff --git a/public/assets/form/form.js b/public/assets/form/form.js
@@ -274,6 +274,7 @@ $(function() {
         _this.render()
         return true
       })
+      window.addEventListener('resize', _this.resizeModalBackdrop.bind(_this));
     }
   }
 
@@ -372,6 +373,12 @@ $(function() {
     }
   }
 
+  Plugin.prototype.resizeModalBackdrop = function() {
+    if (this.$modal) {
+      this.$modal.find('.js-zammad-form-modal-backdrop').css('height', this.$modal.prop('scrollHeight'));
+    }
+  }
+
   // render form
   Plugin.prototype.render = function(e) {
     var _this = this
@@ -380,8 +387,8 @@ $(function() {
     _this.log('debug', 'modalOpenTime:', _this.modalOpenTime)
 
     var element = "<div class=\"" + _this.options.prefixCSS + "modal\">\
-      <div class=\"" + _this.options.prefixCSS + "modal-backdrop js-close\"></div>\
-      <div class=\"" + _this.options.prefixCSS + "modal-body\">\
+      <div class=\"" + _this.options.prefixCSS + "modal-backdrop js-zammad-form-modal-backdrop\"></div>\
+      <div class=\"" + _this.options.prefixCSS + "modal-body js-zammad-form-modal-body\">\
         <form class=\"zammad-form\"></form>\
       </div>\
     </div>"
@@ -414,7 +421,7 @@ $(function() {
     this.$form  = $form
 
     // bind on close
-    $element.find('.js-close').off('click.zammad-form').on('click.zammad-form', function (e) {
+    $element.find('.js-zammad-form-modal-backdrop').off('click.zammad-form').on('click.zammad-form', function (e) {
       e.preventDefault()
       _this.closeModal()
       return true
@@ -435,6 +442,7 @@ $(function() {
     // append modal to body
     else {
       $('body').append($element)
+      this.resizeModalBackdrop()
     }
 
   }