Fix rtl issue take 2

[kenearley]

@pfiller This builds upon the idea in this PR #1096 (comment) except it's toggling a css class to do the positioning.

• LTR select boxes will position left: -9000px
• RTL select boxes will position left: 9000px
• The scrollbar issue will still exist if you have both RTL and LTR on the page (fixed for demo page)
• The scrollbar issue will still exist if the page isn't set in the same direction as you've set the select box (fixed for demo page)

cc: @stof, @ido-ran, @krembo99

[pfiller]

@kenearley nice work. This made me realize we could simplify some code a bit by using a generic -with-drop class (currently, Chosen uses something like that only for the single version). I went ahead and made the change so scope it out.

@mlharvest there are some css changes here, but I don't think they're super impactful. Mind taking a quick gander?

This is good to go once you guys sign off.

[mlettini]

Quick glance everything looks fine. Question, why is 9000px better/different than 9999px? personal preference?

[kenearley]

why is 9000px better/different than 9999px? personal preference?

It just wasn't consistent. Makes it easier to do search if we stick to one number that represents 'move it way off the page'. I'm cool with whatever number.

[kenearley]

I'm happy with this.

[mlettini]

Ok cool go with 9000. But in harvestapp/gh I usually use 9999 because its faster to hit four 9's and it's further you can go in four characters 🐎

[kenearley]

@mlharvest Done!

[pfiller]

I suck at merging.

[andriijas]

Why does it need to be moved off the screen rather than hidden?

[kenearley]

@andriijas Good question. Here's an explanation given by @pfiller.