RTL major issue: Page width increases in RTL pages #1056

Closed
ShockShadow opened this Issue Feb 22, 2013 · 7 comments

Projects

None yet

5 participants

Hello,

Issue:
The page width gets too much increased in case of an RTL page. You can also directly investigate this issue by switching the page direction ( Firefox -> View -> Switch Page Direction ).

The following CSS style caused the issue:

body {direction: rtl}

I could temporarily solve it by using the following CSS:

body {direction: ltr}
div#container {direction: rtl}

I attached an image for the issue (Look at the scroll bar in the attached image)
Chosen Issue

Chosen version: 0.9.11
Chosen plugin version: jQuery
Browser: Firefox 18.0.1
OS: Windows XP SP2

Collaborator
stof commented Feb 22, 2013

Apply the chzn-rtl class on your select

I have already done that. The issue is still persisting.

Collaborator
stof commented Feb 22, 2013

note that this class has to exist on the select at the time where chosen is initialized, so that it does the initialization in RTL mode

Again, I edited the file (example.jquery.html) and added the chzn-rtl class to all Chosen selects. Nothing changed except the Chosen itself is rendered in the RTL direction. The page is still affected!

When I scrolled to the far left, I noted that the Chosen drop menu element is not hidden, but it is moved too far to the left (On blurring the Chosen select), so it causes that behavior for the page.

I have the same problem , and applying the chzn-rtl class does nothing to resolve this specific issue (only align fields to right). The problem comes from the -9000 left margin which is hardcoded in the JS file. There is however a pull request that handles that problem. https://github.com/harvesthq/chosen/pull/956/files

Contributor
pfiller commented Apr 16, 2013

Duplicate of #447

@pfiller pfiller closed this Apr 16, 2013
arashtad commented Jan 1, 2017 edited

I tried to solve it via my LESS file and the code below fixed it:

.chzn-container {
	.chzn-drop {
		left: 0;
		right: -9999px;
		.chzn-search {
			display: none;
		}
	}
	&.chzn-with-drop {
		.chzn-drop {
			left: 0;
			right: 0;
		}
	}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment