jQuery-QueryBuilder icon indicating copy to clipboard operation
jQuery-QueryBuilder copied to clipboard

Incorrect ghost position in sort plugin on Bootstrap modal window

Open yusufozturk opened this issue 5 years ago • 4 comments

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

yusufozturk avatar Nov 07 '18 13:11 yusufozturk

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

mistic100 avatar Nov 07 '18 14:11 mistic100

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 avatar Nov 07 '18 16:11 yusufozturk

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

yusufozturk avatar Nov 07 '18 16:11 yusufozturk

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

Sent from MailDroid

-----Original Message----- From: Yusuf Ozturk [email protected] To: mistic100/jQuery-QueryBuilder [email protected] Cc: Damien Sorel [email protected], Mention [email protected] 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

mistic100 avatar Nov 07 '18 17:11 mistic100