How to add rtl support to angular chosen

Question

I'm using angular with chosen ( source) , and i'm trying to add rtl support , here is my Demo . i've read this but it's not working .

The problem is when body has dir="rtl" attribute after click on select list , page get horizantal scroll .

 <select class="chzn-rtl" chosen disable-search="false"
  no-results-text="'Tough luck'"
  ng-model="bar">
    <option>Hi</option>
    <option>This is fun</option>
    <option>I like Chosen so much</option>
    <option>I also like bunny rabbits</option>
    <option value=""></option>
  </select>

Demo

score 0 · Accepted Answer · answered Feb 07 '15 at 11:55

This is happening because chosen dropdown never getting close & On start up it goes most left of the end where scroll bar end.

CSS

.chosen-container{
  .position: fixed;
  z-index: 99;
}

Adding inside your style will fix this problem. I haven't find any good fix for it. This is some what hacky way but this work around I found.

Working Plunkr

Thanks.

How to add rtl support to angular chosen

1 Answers1