clickable area of ui-select inside is 10px a bootstrap modal

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:

10px sized placeholder

Google Chrome inspector

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

Have you tried to put ui-select initialization into modal open callback? It seems that when modal is opened first time ui-select isn't initialized yet. — Dmitry Shurshilin, May 11 '15 at 09:50
@DmitryS Ok, maybe I found the solution. I tried: `$('modal-invite').modal('show')` and then `$scope.$apply();`, and this seems to work! — ProGM, May 11 '15 at 10:12
Probably because, like Dmitry said, the ui-select isn't displayed yet when the page is loaded. — eHx, May 29 '15 at 15:07

score 2 · Accepted Answer · answered Jun 12 '15 at 07:35

2

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();

answered Jun 12 '15 at 07:35

ProGM

6,949
4
33
52

I am having a similar problem. Calling a div which has ui-select by click of a button. – Rk R Bairi Mar 03 '17 at 05:43

score 0 · Answer 2 · answered Mar 24 '17 at 14:35

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');

clickable area of ui-select inside is 10px a bootstrap modal

2 Answers2