How to Make The UI-Select More Bootstrap

How to make the ui-select more bootstrap?

Not perfect at all, but here is some progress:

.bootstrap .ui-select-bootstrap .ui-select-toggle {
  cursor: default;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}

.bootstrap .ui-select-bootstrap input[type="text"] {
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}

.bootstrap .ui-select-bootstrap .ui-select-toggle .caret {
  display: none;
}

.bootstrap .ui-select-bootstrap .ui-select-match .btn-default,
.bootstrap .ui-select-bootstrap .ui-select-match .btn-default:hover {
  color: #555;
  background-color: initial;
  border-color: #ccc;
}

.bootstrap .ui-select-bootstrap .ui-select-match {
  outline: 0 none;
  outline-offset: 0;
}

.bootstrap .ui-select-bootstrap .btn-default-focus .btn-default,
.bootstrap .ui-select-bootstrap .btn-default-focus .btn-default:hover {
  border-color: #66afe9;
  background-color: #fff;
  color: #555;
}

.bootstrap .ui-select-bootstrap .ui-select-choices-row-inner,
.bootstrap .ui-select-bootstrap .ui-select-choices-group-label {
  cursor: default;
}

To use it, put the ui-select in a <div class="bootstrap">. It works best in chrome since the -moz-appearance: menulist; doesn't do anything (-webkit-appearance: menulist; adds a little arrow on the side to make it look like a select box).

This only solves 1, 2, 4 and 6. Also, there are some more problems:

When opening the ui-select box and then clicking away it should have no blue glow.
When opening the ui-select box it has a blue glow, and when choosing an option the glow disappears and then reappears. It shouldn't do so, the glow should just stay there.
Right clicking the ui-select box creates a blue-ish glow with no blue border. This should never happen. The glow should be blue and the border should be blue too.

When using ui-select with theme Bootstrap: how to make the select smaller?

A solution someone gave in the Github site of ui-select:

Wrap the directive in a div with form-group-sm, eg:

<div class='form-group-sm'><ui-select>...</ui-select></div>

https://github.com/angular-ui/ui-select/issues/169#issuecomment-298361767

How to get the selected option from ui-select multiple

After a bit of research on the repository page for the ui-select-directive
I figured you could use an on-select event binding like this:
on-select="onSelect($item, $model)". See the updated snippet:

angular.module('myApp',['ui.select']).controller('MyController', function ($scope) {    $scope.myUiSelect={model:{}}; // encapsulate your model inside an object.  $scope.availableData=["a","b","c"]; //some random options    $scope.onSelect = function(item,model){    console.log("selectedItem",item);  }  });

<link href="https://rawgit.com/angular-ui/ui-select/master/dist/select.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><script src="https://rawgit.com/angular-ui/ui-select/master/dist/select.js"></script><body ng-app="myApp" ng-controller="MyController">        <ui-select multiple ng-model="myUiSelect.model" close-on-select="false" title="Choose a dataset" on-select="onSelect($item, $model)">    <ui-select-match placeholder="Select something">{{$item.label}}</ui-select-match>      <ui-select-choices repeat="data in availableData | filter:$select.search">                        {{data}}      </ui-select-choices>  </ui-select>      </body>

ui-select multiple: ng-model how will it be saved as string and not as array

Assuming the search text is going to be like "Mon,Tue" which will filter all the ui-selects which have ["Mon","Tue"] you can write your own filter function and pass that. For example:

<tr ng-repeat="meas in foo= (res.foos | filter: $ctrl.filterDaysSelected">

And in your controller you'd need to create that function:

$ctrl.filterDaysSelected = function(value, index, array) {}

Where you would need to:

Split the value of your search criteria by ","
Validate that each item in your split array exists in the function value parameter

Angular Bootstrap Ui-select

You must visit this link and follow its examples.

You can follow its examples

I personally prefer to use uiselect2, its more powerful and simple than uiselect

link of uiselect2

ui-select with in multiple mode - how to implement reaction on click for the selected item?

try to move ng-click inside ui-select-match:

  <ui-select-match placeholder="Click to select">
    <a ng-click="myFunction()" > {{$item}} </a>
  </ui-select-match>

How to Make The UI-Select More Bootstrap