ui-select inside的可点击区域是10px引导模态

Question

I have a bootstrap modal and, inside it, I have a ui-select for tagging. Here's my example:

<div class="modal modal-invite">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <ui-select multiple tagging tagging-label="" ng-model="email_list" theme="bootstrap" ng-disabled="disabled" on-select="" on-remove=""  title="Insert your friends email here." >
          <ui-select-match placeholder="Your friends email here...">{{$item}}</ui-select-match>
          <ui-select-choices repeat="email in email_list | filter:$select.search">
            {{email}}
          </ui-select-choices>
        </ui-select>
      </div>
      <div class="modal-footer">
        <button class="btn btn-success">Invite</button>
      </div>
    </div>
  </div>
</div>

My problem is: When I open the modal with $('modal-invite').modal('show') , the size of the placeholder (and the clickable area) is 10 pixel, like this:

After clicking on it, it gets the correct width.
How can I make ui-select refresh it's size when the modal opens?

Answer 1

Finally I solved checking the ui-select sources.
It seems that ui-select recalculates the input size with a $watch on the parent width.

So, in order to refresh it, I did like this:

$('.modal-invite').modal('show');
$scope.$apply();

Answer 2

I had simular problem.

I know altering a source file is not good practice, and it would be better to somehow target it from my own code - but for now I fixed it by commenting out a line in the source code that sets the input field to 10px when its rendering the tags.

In line 831 in the source select.js file, comment out: ctrl.searchInput.css('width', '10px');