Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

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

Closed
ShockShadow opened this Issue · 6 comments

4 participants

@ShockShadow

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

@stof
Collaborator

Apply the chzn-rtl class on your select

@ShockShadow

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

@stof
Collaborator

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

@ShockShadow

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.

@krembo99

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

@pfiller
Owner

Duplicate of #447

@pfiller pfiller closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.