search

seiyria / bootstrap-slider

A slider control for Bootstrap 3 & 4.
http://seiyria.github.io/bootstrap-slider/
Other
2.99k stars 1.14k forks source link

Handle moves to wrong position after click if browser window (or parent container) has horizontal scroll #533

Open yarkovski opened 8 years ago

yarkovski commented 8 years ago

When I was looking for duplicates of this issue I found this jsbin example (so credit goes to the person who created it): http://jsbin.com/xeyofajiki/1/edit?html,css,js,output

Steps to reproduce:

  1. Make sure that Output section has horizontal scroll;
  2. Drag scroll to the right a bit (or click right arrow link for scroll) so scroll is not in most left position;
  3. Try to click anywhere on the slider;

Result -> Slider handle is shown in wrong position.

Similar wrong behavior occurs when trying to drag the handle. Also this can be reproduced on iPad if we zoom in on container.

Note: Correct position is exactly calculated by the following formula: "wrong position" - position of the scroll. Also if you move scroll to the most left position again, everything starts to work fine again.

It seems like it's quite easy to fix using formula above, so could you please take a look? Or maybe give me some hints how can I fix it by myself.

Thank you in advance.

yarkovski commented 8 years ago

If someone interested I was able to fix this issue just by changing _offsetLeft method. Now instead of obj.getBoundingClientRect().left I simply return obj.offsetLeft.

But I'm not sure if it does not break another sliders, we use only horizontal ones and for them everything works like a charm now.

LamerVK commented 7 years ago

Hi. I face the same issue but a bit different situation: in my case input has vertical orientation and located inside div with overflow: scroll. When scrollTop of a parent div equals to 0 - everything is ok, but if scroll > 0 - slider handle getting wrong position. Any ideas?

danielFarre commented 6 years ago

Hello, i had the same problem, but i found a solution. When the _offsetTop is calculated if it should be: $(obj).offset().top; instead of the loop calculation. Sorry if i was late.