Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source 
fixes #978
This commit is contained in:
Felix Niklas 2018-12-03 14:18:24 +01:00 committed by Thorsten Eckel
parent 26b9eb0281
commit 61975af672
2 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
public/assets/form/form.css
View file

@ -34,6 +34,7 @@
height: 100%; height: 100%;
text-align: center; text-align: center;
z-index: 999; z-index: 999;
overflow: auto;
} }
.zammad-form-modal:before { .zammad-form-modal:before {
@ -61,7 +62,7 @@
padding: 24px 24px 22px; padding: 24px 24px 22px;
width: 90%; width: 90%;
max-width: 26em; max-width: 26em;
margin: 0 auto; margin: 20px auto;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
display: inline-block; display: inline-block;

14
public/assets/form/form.js
View file

@ -274,6 +274,7 @@ $(function() {
_this.render() _this.render()
return true 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 // render form
Plugin.prototype.render = function(e) { Plugin.prototype.render = function(e) {
var _this = this var _this = this
@ -380,8 +387,8 @@ $(function() {
_this.log('debug', 'modalOpenTime:', _this.modalOpenTime) _this.log('debug', 'modalOpenTime:', _this.modalOpenTime)
var element = "<div class=\"" + _this.options.prefixCSS + "modal\">\ var element = "<div class=\"" + _this.options.prefixCSS + "modal\">\
<div class=\"" + _this.options.prefixCSS + "modal-backdrop js-close\"></div>\ <div class=\"" + _this.options.prefixCSS + "modal-backdrop js-zammad-form-modal-backdrop\"></div>\
<div class=\"" + _this.options.prefixCSS + "modal-body\">\ <div class=\"" + _this.options.prefixCSS + "modal-body js-zammad-form-modal-body\">\
<form class=\"zammad-form\"></form>\ <form class=\"zammad-form\"></form>\
</div>\ </div>\
</div>" </div>"
@ -414,7 +421,7 @@ $(function() {
this.$form = $form this.$form = $form
// bind on close // 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() e.preventDefault()
_this.closeModal() _this.closeModal()
return true return true
@ -435,6 +442,7 @@ $(function() {
// append modal to body // append modal to body
else { else {
$('body').append($element) $('body').append($element)
this.resizeModalBackdrop()
} }
} }