Clever Geek Handbook

Ui-select - make an arrow on the left side

I am using ui-select select-box for angularJS and I need an arrow in the select box that needs to be on the left side to match the other select boxes I have and the whole direction of the rtl

site.

The arrows are visible on the right side in all the examples I've found. I tried to set properties direction

and float

, but nothing worked.

I am using style bootstrap

to select select-box. And in "real" selection botstrap, it is very easy to move the left arrow just by setting dir="rtl"

.

Any ideas? Thank!

EDIT:

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

+3


source to share


1 answer


You can reset right

and install 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;
 }
+6


source






More articles:


All Articles