mistic100 / jQuery-QueryBuilder

jQuery plugin offering an interface to create complex queries
https://querybuilder.js.org
MIT License
1.68k stars 552 forks source link

Incorrect ghost position in sort plugin on Bootstrap modal window #741

Open yusufozturk opened 5 years ago

yusufozturk commented 5 years ago

First, please check the codepen:

https://codepen.io/yusufozturk/pen/oQbvzj

When you try to move one of the rule, ghost position is not right on the modal.

image

It's because x and y positions are not correct in the modal view. Probably same issue:

https://stackoverflow.com/questions/46626376/incorrect-mouse-x-y-position-on-bootstrap-modal-window

As the solution, we should use modal window instead of browser window? I think select2 has the similar issue in the bootstrap modal and they have "dropdownParent" parameter to overcome this issue:

https://select2.org/troubleshooting/common-problems

I will apply a custom fix for this issue but I don't have time to send a pull request in a short time, sorry.

Yusuf

mistic100 commented 5 years ago

Technical explanaition of this behaviour https://stackoverflow.com/questions/25824749/why-webkit-transform-translate3d0-0-0-messes-up-with-fixed-childs

yusufozturk commented 5 years ago

I fixed this issue with following change:

from:

// make the ghost follow the cursor
ghost[0].style.top = event.clientY - 15 + 'px';
ghost[0].style.left = event.clientX - 15 + 'px';

to:

// make the ghost follow the cursor
var modalDialog = src.$el.parents('.modal-dialog');
ghost[0].style.top = event.pageY - modalDialog.offset().top - 15 + 'px';
ghost[0].style.left = event.pageX - modalDialog.offset().left - 15 + 'px';

Yusuf

yusufozturk commented 5 years ago

I will close this issue @mistic100

Would be really nice if there is a parameter for modals, so we can use modal offset :)

Thanks.

Yusuf

mistic100 commented 5 years ago

Why do you close if it's not solved ? Please reopen

Sent from MailDroid

-----Original Message----- From: Yusuf Ozturk notifications@github.com To: mistic100/jQuery-QueryBuilder jQuery-QueryBuilder@noreply.github.com Cc: Damien Sorel contact@git.strangeplanet.fr, Mention mention@noreply.github.com Sent: mer., 07 nov. 2018 17:23 Subject: Re: [mistic100/jQuery-QueryBuilder] Incorrect ghost position in sort plugin on Bootstrap modal window (#741)

I will close this issue @mistic100

Would be really nice if there is a parameter for modals, so we can use modal offset :)

Thanks.

Yusuf

-- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/mistic100/jQuery-QueryBuilder/issues/741#issuecomment-436683595