chosen direction rtl horizontal scroll issue

Question

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.

Answer 1

.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;"

Answer 2

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 ;)