3

I'm using the ui-select select-box for angularJS, and I need the arrow of the select-box to be on the left side to match other select-boxes I have and the whole rtl direction of the site.

The arrow appreas on the right side in all the examples I'd found. I tried setting the direction and the float properties but nothing worked.

I'm using the bootstrap style for the ui-select select-box. And in the "real" bootstrap select-boxes it's really easy to move the arrow to the left, simply by setting dir="rtl".

Any ideas? Thanks!

EDIT:

Here's an official example so that you can play with it.

Ella Sharakanski
  • 2,683
  • 3
  • 27
  • 47

1 Answers1

7

You can reset the right and set left like this

.ui-select-bootstrap .ui-select-toggle > .caret {
   right: initial;
   left: 10px; /* or any other value - it should be the same as the original right value */
}


.ui-select-bootstrap > .ui-select-match > .btn {
    text-align: right !important;
    direction: rtl;
 }


 .ui-select-bootstrap > .ui-select-match > .btn > span.pull-left {
     float: right !important;
 }
Sven Schoenung
  • 30,224
  • 8
  • 65
  • 70
Alon Eitan
  • 11,997
  • 8
  • 49
  • 58
  • Thanks! I know it doesn't appear in my question but how do you make the text inside the select-box be `rtl`? – Ella Sharakanski May 22 '15 at 22:26
  • It really helps! Just a few more things: 1. Is there a way to make the arrow shape the same as in bootstrap? I noticed now that the arrows are different. 2. For some reason the box goes grey when I'm hovering. How do I remove this? I guess the bootstrap style isn't so bootstrap... – Ella Sharakanski May 22 '15 at 22:45
  • @EllaShar - It would be best if you create a plunker with a new answer. It's very difficult to track your requirements when they are listed in the comments – Alon Eitan May 22 '15 at 22:47
  • Done! http://stackoverflow.com/questions/30407218/how-to-make-the-ui-select-more-bootstrap – Ella Sharakanski May 22 '15 at 23:20