chosen direction rtl horizontal scroll issue
.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;"
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 ;)