0

I have the following code which is almost a copy/paste from the website PLUNKER

<p>Selected: {{userCtrl.tech.selected}}</p>
  <ui-select ng-model="userCtrl.tech.selected" theme="bootstrap" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select or search a tech">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="tech in userCtrl.allAvailableTechs | filter: $select.search">
      <span ng-bind-html="tech.tech.name | highlight: $select.search"></span>
    </ui-select-choices>
  </ui-select>

However, when I do this, and I select one item from my list, then suddenly the select box get shrinked.

Before choosing

After choosing

How can I fix this so that it will correctly show my selected item on the select box, and not shrinked like that?

Shervin Asgari
  • 23,901
  • 30
  • 103
  • 143
  • As you said, it is working in the plunkr, and you say you've copy pasted it. So you may have done something wrong that we cannot guess. Are you sure you included all the required files (especially the CSS)? – floribon Feb 05 '15 at 22:52
  • I have included the select.js and select.css, otherwise it shouldn't have worked and looked like it do? I have almost copy pasted it... – Shervin Asgari Feb 06 '15 at 09:19
  • Btw, the code is on Github if you need to browse the code https://github.com/cash1981/civilization-boardgame/blob/master/civilization-web/app/views/useritems.html (Browse to the end) – Shervin Asgari Feb 06 '15 at 10:00
  • I ditched angular-ui-select in favor of nya-bootstrap-select which worked – Shervin Asgari Feb 16 '15 at 06:41

0 Answers0