angularjsangular-ui-bootstrapui-select

Using multi-select along with dropdown triangle displayed in ui-select


Is there any way to keep dropdown triangle (▼) displayed for multiple mode of ui-select?

<div ui-select multiple ng-model="selectedItems" class="form-control">
    <div ui-select-match>
        <span>{{$item.name}}</span>
    </div>

    <div ui-select-choices repeat="item in availableItems" >
        <span>{{item.name}}</span>
    </div>  
</div>

I managed to steal the triangle from ordinary ui-select:

<i class="caret pull-right" ng-click="$select.toggle($event)"></i>

but having difficulties displaying it properly on the ordinary place to the right. Any tips? Thanks.


Solution

  • The best approach I worked out is a scalable background SVG image applied using this CSS:

    .select2-search-field {
        width: 100%;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 13 6' fill='gray'><polygon points='0 1 8 1 4 5'></polygon></svg>");
        background-repeat: no-repeat;
        background-position-y: center;
        background-position-x: right;
    }