Added top offset option and round numbers in CSS

[danbovey]

Hi!

Thanks for this plugin, it's brilliant!

These changes allow people to specify where the suggestions show up vertically, you might want to add offsetY and offsetWidth if you think there's any use for them. Personally, I needed vertical so I only added that.

Also, there were some visual glitches because you weren't rounding the offsets to a full number.

[SimonSteinberger]

Hi danbovey,

thanks for your pull request 👍 Definitely a very useful addition. Currently, positioning of the suggestion box can be done by setting a margin via CSS, like so:

.autocomplete-suggestions { margin: 2px 0px 0px -2px; }

This shifts the suggestions box 2px down and 2px to the left. Your solution is definitely easier understandable, but on the other hand, we try to keep the code base as simple as possible. Not sure which way's the best choice here.

Could you give me an example where the non-rounded values cause an issue?

Cheers, Simon

[danbovey]

OK, just say the word and I'll make a pull request for the rounding issue only.

I'm running Chrome 47. Notice that the suggestions are slightly wider than the input because of the non-rounded width and not touching the bottom of the input because of the non-rounded top offset.

Without fix

With fix

[SimonSteinberger]

Thanks for the screenshots. I'll try this today with various browsers and settings. No pull request necessary :-) Such a small change is done easier by directly implementing it. Cheers, Simon

[SimonSteinberger]

That's really an odd bug. The thing is: rounding shouldn't make any difference, because we're adding several integers (full numbers) there.

I can't see the issue on any page/browser right now. And I'm not sure if including this patch really improves things in general. It works in your case - so it would be good to know what actually causes the issue. Maybe you're working on a scaled view?

[danbovey]

Just found this helpful parameter on another JS package. Different problem to do with transitions and blurry text, but it fixes it with the same solution you should - give people an option to round the offsets.

http://www.idangero.us/swiper/api (Ctrl + F for roundLengths)

In reply to above comment, the rounding is making a difference because I'm logging that.sc.style.top and it gives a decimal value, and adding full numbers to it isn't going to change the fact that it has decimal places :)

[SimonSteinberger]

I don't understand why that.sc.style.top returns a decimal value, but let's just make the change and see if others report an issue with the rounding in place.

To round things up, I've included two parameters for setting the offset of the suggestions container, offsetLeft and offsetTop.