diff --git a/examples/demo-multi-select.html b/examples/demo-multi-select.html index 4246aa988..ed1e6e27a 100644 --- a/examples/demo-multi-select.html +++ b/examples/demo-multi-select.html @@ -121,8 +121,8 @@

Array of strings

Selected: {{multipleDemo.colors}}


-

Array of objects

- +

Array of objects (sorting enabled)

+ {{$item.name}} <{{$item.email}}>
diff --git a/examples/demo-tagging.html b/examples/demo-tagging.html index b2cc6cf7a..a915314c2 100644 --- a/examples/demo-tagging.html +++ b/examples/demo-tagging.html @@ -65,8 +65,8 @@

Tagging Demos

Simple String Tags

-

(With Custom Tag Label)

- +

(With Custom Tag Label / Sort Enabled)

+ {{$item}} {{color}} diff --git a/examples/select2-bootstrap3.html b/examples/select2-bootstrap3.html index 4febfa396..c898e38eb 100644 --- a/examples/select2-bootstrap3.html +++ b/examples/select2-bootstrap3.html @@ -64,6 +64,21 @@ +
+ +
+ + + {{$select.selected.name}} + +
+ +
+
+ +
+
+
diff --git a/src/bootstrap/match-multiple.tpl.html b/src/bootstrap/match-multiple.tpl.html index f303016e4..3e60ccd0d 100644 --- a/src/bootstrap/match-multiple.tpl.html +++ b/src/bootstrap/match-multiple.tpl.html @@ -1,13 +1,13 @@ + ng-class="{'btn-primary':$select.activeMatchIndex === $index, 'select-locked':$select.isLocked(this, $index)}" + ui-select-sort="$select.selected">  × diff --git a/src/bootstrap/select-multiple.tpl.html b/src/bootstrap/select-multiple.tpl.html index a5a4d0200..26f2c7dbf 100644 --- a/src/bootstrap/select-multiple.tpl.html +++ b/src/bootstrap/select-multiple.tpl.html @@ -13,7 +13,8 @@ ng-click="$select.activate()" ng-model="$select.search" role="combobox" - aria-label="{{ $select.baseTitle }}"> + aria-label="{{ $select.baseTitle }}" + ondrop="return false;">
diff --git a/src/select.css b/src/select.css index c5aecbd2a..c284e6d98 100644 --- a/src/select.css +++ b/src/select.css @@ -121,11 +121,12 @@ height: auto; max-height: 200px; overflow-x: hidden; + margin-top: -1px; } .ui-select-multiple.ui-select-bootstrap { height: auto; - padding: .3em; + padding: 3px 3px 0 3px; } .ui-select-multiple.ui-select-bootstrap input.ui-select-search { @@ -133,6 +134,7 @@ border: none; outline: none; height: 1.666666em; + margin-bottom: 3px; } .ui-select-multiple.ui-select-bootstrap .ui-select-match .close { @@ -140,8 +142,33 @@ line-height: 0.75; } -.ui-select-multiple.ui-select-bootstrap .ui-select-match-item{ +.ui-select-multiple.ui-select-bootstrap .ui-select-match-item { outline: 0; + margin: 0 3px 3px 0; +} + +.ui-select-multiple .ui-select-match-item { + position: relative; +} + +.ui-select-multiple .ui-select-match-item.dropping-before:before { + content: ""; + position: absolute; + top: 0; + right: 100%; + height: 100%; + margin-right: 2px; + border-left: 1px solid #428bca; +} + +.ui-select-multiple .ui-select-match-item.dropping-after:after { + content: ""; + position: absolute; + top: 0; + left: 100%; + height: 100%; + margin-left: 2px; + border-right: 1px solid #428bca; } .ui-select-bootstrap .ui-select-choices-row>a { diff --git a/src/select.js b/src/select.js index f8906c235..eaf5c7d94 100644 --- a/src/select.js +++ b/src/select.js @@ -90,6 +90,7 @@ .constant('uiSelectConfig', { theme: 'bootstrap', searchEnabled: true, + sortable: false, placeholder: '', // Empty by default, like HTML tag