From 61975af67209d12bcedd3abc35d5924ddc3a9a08 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Mon, 3 Dec 2018 14:18:24 +0100
Subject: [PATCH] Form: make it scrollable when the its bigger than the
 viewport

fixes #978
---
 public/assets/form/form.css |  3 ++-
 public/assets/form/form.js  | 14 +++++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/public/assets/form/form.css b/public/assets/form/form.css
index e503b82ed..f7b9a736d 100644
--- 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
index 961d76179..dcb7da0ee 100644
--- 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()
     }
 
   }