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%;
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;

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

@ -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()
}
}