CODEWITHSUNDEEP
htmlcssjquery-chosen
Mahesh
Mahesh

Reputation: 870

chosen direction rtl horizontal scroll issue

When the page direction is set to 'rtl; it creates horizontal scroll. I've used chosen plugin. it creates unwanted "left: -9999px;" for "chosen-drop" div class. please help me to solve this.

enter image description here

enter image description here

enter image description here

Upvotes: 6

Views: 3501

Answers (4)

Mohamad Abdelazeem
Mohamad Abdelazeem

Reputation: 1

I have tried the following custom css and it is working for me

html{
direction:ltr;
}

Upvotes: 0

Ali Ayoubi
Ali Ayoubi

Reputation: 1

Change the left:-9000 to display:none in chosen.css and jquery.chosen.js. This is a known issue with Chosen. It is working well for me.

https://github.com/harvesthq/chosen/issues/447

https://github.com/woothemes/woocommerce/issues/3386

Upvotes: 0

Alireza Fattahi
Alireza Fattahi

Reputation: 45485

Make sure that when your page is RTL, you also configure your chosen selects be RTL. As mentioned in https://harvesthq.github.io/chosen/ Try

<select class="chosen-select chosen-rtl">

If all your selects are rtl you can can add chosen-rtl to them all before calling chosen do like:

$('select:visible').addClass("chosen-rtl");
$('select:visible').chosen();

It is much better than tweaking the component css ;)

Upvotes: 4

JWarker
JWarker

Reputation: 249

.chosen-container .chosen-drop {
    position: absolute;
    top: 100%;
    left: 9999px;
    z-index: 1010;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    border-top: 0;
    background: #d1d0d0;
}

Find and Change this with your "chosen.css" file. However "left: -9999px;" should be changed into "left: 9999px;"

Upvotes: 11

Related Questions