Fix chosen.jquery.js in-script CSS when the control is used in RTL state #1096

Closed
wants to merge 1 commit into
from

Projects

None yet

4 participants

@ido-ran

When the control is used as RTL the way to hide the drop-down list is to put it on positive 9000px and when used in LTR -9000px is use

@ido-ran ido-ran Fix chosen.jquery.js in-script CSS when the control is used in RTL state
When the control is used as RTL the way to hide the drop-down list is to put it on positive 9000px and when used in LTR -9000px is use
4628581
@ido-ran ido-ran commented on the diff Mar 19, 2013
chosen/chosen.jquery.js
@@ -1004,8 +1030,9 @@ Copyright (c) 2011 by Harvest
};
Chosen.prototype.keydown_checker = function(evt) {
- var stroke, _ref;
- stroke = (_ref = evt.which) != null ? _ref : evt.keyCode;
+ var stroke, _ref1;
@ido-ran
ido-ran Mar 19, 2013

I'm not suer why the cake build change this from _ref to _ref1

@kenearley kenearley was assigned Apr 19, 2013
@kenearley

@ido-ran Sorry for the late reply. Could you give a reason for why this 'fix' is necessary? I just don't see it. Thanks.

@pfiller

@kenearley Browsers with languages that use left-to-right languages (like English) will ignore any content with a negative left position when calculating dimensions for scrollbars, but will show huge scrollbars for content off the right edge of the screen. Browsers set to use right-to-left languages (like Hebrew) will reverse it.

TL;DR People using Chosen and the RTL setting get nasty scrollbars.

I actually wonder what happens if we use a negative top position. If we just set it to top: -9999px do scrollbars get janky? This would diminish the need for a conditional.

@ido-ran

When using chosen in right-to-left page the css that cause the the drop-down to be hidden need to use positive 9000 as left while left-to-right need to use negative 9000.
That's all this fix is about.

@kenearley

@pfiller @ido-ran I've not been able to reproduce any issue. I did mess around with negative top and it was causing the page to jump.

@ido-ran If you could provide an example of the issue jsFiddle, I will take a look at this again. Thanks.

@krembo99

Here you go : Problem´s fiddle :
all you have to do is define dir="rtl"
Just look at the bottom of the page ( before opening the select menu.. )
You can also see a screenshot here in another issue opened here : #1056

This was tested on several firefox version, opera and chrome.
Might be that it depends on browser /os , but I had definitely encountered this problem on every single use.

@kenearley

@krembo99 Thanks. I'll take a look.

@krembo99

@kenearley you should also have a look at : https://github.com/harvesthq/chosen/pull/956/files (forgot to Link before)

@ido-ran

Thank you @krembo99 for betting me to the sample.

@kenearley

I don't believe this PR solves the problem. This is what I see in the example page:

  1. Put dir='rtl' on body tag": The lrt lists are pushed way out to the left with large scrollbar
  2. Put dir=rtl' on the container div of the rtl examples: The rtl lists are pushed way out to the right with large scrollbar.
@pfiller

I think the example page is not a good page to test whether or not this is solved. People are not likely to be mixing both styles of chosen (right to left and left to right). The example page is set up to show multiple types of Chosen options and is, therefore, abnormal.

@kenearley

It seems like the solution should not cause it even when mixed, but I'll test the PR with only rtl.

@ido-ran
@kenearley kenearley referenced this pull request Apr 23, 2013
Merged

Fix rtl issue take 2 #1159

@kenearley

Closing this PR in favor of #1159

@kenearley kenearley closed this Apr 23, 2013
@coenjacobs coenjacobs referenced this pull request in woothemes/woocommerce May 30, 2013
Closed

Chosen on RTL languages #3258

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment