UI-Select is dislocated on focus when using with gurayyarar AdminBSB Material theme in aspnetboilerplate(MVC & AngularJs)

Question

I am trying to use ui-select in aspnetboilerplate startup template of MVC5 & AngularJs. The template uses AdminBSB Material based theme. But it behaves awkward. When I click to select any item, it will fall down and show the list. After selection, it will be back. As shown in this Image

Following is my Code:

<div class="col-md-4 pull-left">
<label style="margin-top:-10px;float:left; width:100%; font-size: 13px;font-weight: normal;color: #aaabaf;">
    @L("Customer")
    <ui-select ng-model="vm.selectedCustomer" theme="bootstrap">
        <ui-select-match placeholder="Select a customer">{{$select.selected.name}}</ui-select-match>
        <ui-select-choices position='down' repeat="item in vm.customersList | filter: $select.search">
            <div ng-bind-html="item.name | highlight: $select.search"></div>
            <small ng-bind-html="item.code | highlight: $select.search"></small>
        </ui-select-choices>
    </ui-select>
</label>

Tried to find out which script is doing this thing, but failed. Somebody please help me out

Answer 1

Finally I got it! It was just needed to change the appendToBody option to false in my ui-select configuration like this:

app.config(['uiSelectConfig', function (uiSelectConfig) {
    uiSelectConfig.theme = 'bootstrap';
    uiSelectConfig.resetSearchInput = true;
    uiSelectConfig.appendToBody = false;
}]);