Bootstrap small size not managed #1920
Description
The issues forum is NOT for support requests. It is for bugs and feature requests only.
Please read https://github.com/angular-ui/ui-select/blob/master/CONTRIBUTING.md and search
existing issues (both open and closed) prior to opening any new issue and ensure you follow the instructions therein.
Bug description:
Hallo,
I'm working on some forms where other input components are using "input-sm" for bootstrap input elements.
Using "ui-select" (0.20 version )with theme "bootstrap" it don't size in the right way.
I did not find an option for that...
As workaround I modified some code in "select.js" for that:
$templateCache.put("bootstrap-sm/match.tpl.html","<div class="ui-select-match" ng-hide="$select.open && $select.searchEnabled" ng-disabled="$select.disabled" ng-class="{'btn-default-focus':$select.focus}"><span tabindex="-1" class="btn btn-default btn-sm input-sm form-control ui-select-toggle" aria-label="{{ $select.baseTitle }} activate" ng-disabled="$select.disabled" ng-click="$select.activate()" style="outline: 0;color:#6694b2;background-color:white;border: 2px solid #dce4ec"><span ng-show="$select.isEmpty()" class="ui-select-placeholder text-muted">{{$select.placeholder}} <span ng-hide="$select.isEmpty()" class="ui-select-match-text pull-left" ng-class="{'ui-select-allow-clear': $select.allowClear && !$select.isEmpty()}" ng-transclude=""> <i class="caret pull-right" ng-click="$select.toggle($event)"> <a ng-show="$select.allowClear && !$select.isEmpty() && ($select.disabled !== true)" aria-label="{{ $select.baseTitle }} clear" style="margin-right: 10px" ng-click="$select.clear($event)" class="btn btn-xs btn-link pull-right"><i class="glyphicon glyphicon-remove" aria-hidden="true">");
$templateCache.put("bootstrap-sm/select.tpl.html","<div class="ui-select-container ui-select-bootstrap dropdown" ng-class="{open: $select.open}"><div class="ui-select-match"><input type="search" autocomplete="off" tabindex="-1" aria-expanded="true" aria-label="{{ $select.baseTitle }}" aria-owns="ui-select-choices-{{ $select.generatedId }}" aria-activedescendant="ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}" class="ui-select-search input-sm form-control" ng-class="{ 'ui-select-search-hidden' : !$select.searchEnabled }" placeholder="{{$select.placeholder}}" ng-model="$select.search" ng-show="$select.open"><div class="ui-select-choices"><div class="ui-select-no-choice">");
Link to minimally-working plunker that reproduces the issue:
Version of Angular, UI-Select, and Bootstrap/Select2/Selectize CSS
Angular:
Angular 1.6
UI-Select:
ui-select 0.20
Bootstrap/Select2/Selectize CSS (if applicable):
Bootstrap