I'm trying to use angular ui-select in my project but somehow the css is not working properly.

index.html:

  <link rel="stylesheet" href="bower_ponents/bootstrap-social/bootstrap-social.css" />
  <link rel="stylesheet" href="bower_ponents/angularjs-slider/dist/rzslider.css" />
  <link rel="stylesheet" href="bower_ponents/angular-dropdowns/dist/angular-dropdowns.css" />
  <link rel="stylesheet" href="bower_ponents/angular-loading-bar/build/loading-bar.css" />
  <link rel="stylesheet" href="bower_ponents/textAngular/dist/textAngular.css" />
  <link rel="stylesheet" href="bower_ponents/perfect-scrollbar/src/perfect-scrollbar.css" />
  <link rel="stylesheet" href="bower_ponents/fullcalendar/dist/fullcalendar.css" />
  <link rel="stylesheet" href="bower_ponents/angularjs-toaster/toaster.css" />
  <link rel="stylesheet" href="bower_ponents/ngprogress/ngProgress.css" />
  <link rel="stylesheet" href="bower_ponents/angular-ui-select/dist/select.css" />
  <script src="bower_ponents/ng-file-upload-shim/ng-file-upload-shim.js"></script>
  <script src="bower_ponents/perfect-scrollbar/src/perfect-scrollbar.js"></script>
  <script src="bower_ponents/angular-perfect-scrollbar/src/angular-perfect-scrollbar.js"></script>
  <script src="bower_ponents/moment/moment.js"></script>
  <script src="bower_ponents/fullcalendar/dist/fullcalendar.js"></script>
  <script src="bower_ponents/angular-ui-calendar/src/calendar.js"></script>
  <script src="bower_ponents/angularjs-geolocation/src/geolocation.js"></script>
  <script src="bower_ponents/angularjs-toaster/toaster.js"></script>
  <script src="bower_ponents/ngprogress/build/ngProgress.js"></script>
  <script src="bower_ponents/angular-ui-select/dist/select.js"></script>

Package versions:

Angularjs: 1.4.5 
ui-bootstrap: 0.11.2 
Angular ui-select: 0.12.1

html file:

<ui-select ng-model="stream.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
  <ui-select-match placeholder="Select a social profile in the list">{{$select.selected.name}}</ui-select-match>
  <ui-select-choices repeat="profile in socialNetworks  | filter: $select.search">
    <div ng-bind-html="profile.name | highlight: $select.search"> </div>
  </ui-select-choices>
</ui-select>

controller.js

'use strict';

angular.module('myApp')
    .controller('AddStreamPopUpCtrl', function ($scope, $modalInstance, $state, socialNetworks, $modal) {

      $scope.close = function () {
        $modalInstance.dismiss('close');
      };

      $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };

      $scope.redirect = function() {
        $state.go('dashboard.mailbox.inbox');
        $modalInstance.dismiss('close');
      };

          $scope.socialNetworks = [{name:'test', value: 'someVal'}];
    });

The result of above code looks something like:

Can anyone give pointers why is this not loading css properly ?

I'm trying to use angular ui-select in my project but somehow the css is not working properly.

index.html:

  <link rel="stylesheet" href="bower_ponents/bootstrap-social/bootstrap-social.css" />
  <link rel="stylesheet" href="bower_ponents/angularjs-slider/dist/rzslider.css" />
  <link rel="stylesheet" href="bower_ponents/angular-dropdowns/dist/angular-dropdowns.css" />
  <link rel="stylesheet" href="bower_ponents/angular-loading-bar/build/loading-bar.css" />
  <link rel="stylesheet" href="bower_ponents/textAngular/dist/textAngular.css" />
  <link rel="stylesheet" href="bower_ponents/perfect-scrollbar/src/perfect-scrollbar.css" />
  <link rel="stylesheet" href="bower_ponents/fullcalendar/dist/fullcalendar.css" />
  <link rel="stylesheet" href="bower_ponents/angularjs-toaster/toaster.css" />
  <link rel="stylesheet" href="bower_ponents/ngprogress/ngProgress.css" />
  <link rel="stylesheet" href="bower_ponents/angular-ui-select/dist/select.css" />
  <script src="bower_ponents/ng-file-upload-shim/ng-file-upload-shim.js"></script>
  <script src="bower_ponents/perfect-scrollbar/src/perfect-scrollbar.js"></script>
  <script src="bower_ponents/angular-perfect-scrollbar/src/angular-perfect-scrollbar.js"></script>
  <script src="bower_ponents/moment/moment.js"></script>
  <script src="bower_ponents/fullcalendar/dist/fullcalendar.js"></script>
  <script src="bower_ponents/angular-ui-calendar/src/calendar.js"></script>
  <script src="bower_ponents/angularjs-geolocation/src/geolocation.js"></script>
  <script src="bower_ponents/angularjs-toaster/toaster.js"></script>
  <script src="bower_ponents/ngprogress/build/ngProgress.js"></script>
  <script src="bower_ponents/angular-ui-select/dist/select.js"></script>

Package versions:

Angularjs: 1.4.5 
ui-bootstrap: 0.11.2 
Angular ui-select: 0.12.1

html file:

<ui-select ng-model="stream.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
  <ui-select-match placeholder="Select a social profile in the list">{{$select.selected.name}}</ui-select-match>
  <ui-select-choices repeat="profile in socialNetworks  | filter: $select.search">
    <div ng-bind-html="profile.name | highlight: $select.search"> </div>
  </ui-select-choices>
</ui-select>

controller.js

'use strict';

angular.module('myApp')
    .controller('AddStreamPopUpCtrl', function ($scope, $modalInstance, $state, socialNetworks, $modal) {

      $scope.close = function () {
        $modalInstance.dismiss('close');
      };

      $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };

      $scope.redirect = function() {
        $state.go('dashboard.mailbox.inbox');
        $modalInstance.dismiss('close');
      };

          $scope.socialNetworks = [{name:'test', value: 'someVal'}];
    });

The result of above code looks something like:

Can anyone give pointers why is this not loading css properly ?

• javascript
• css
• angularjs
• twitter-bootstrap
• ui-select

• What theme are you using? – bob Commented Sep 4, 2015 at 19:22
• It's not working for any of the themes. Somehow my html was not appearing in the question earlier..updated that – dark_shadow Commented Sep 4, 2015 at 19:25
• You are not downloading select2.css. Try to use 'select2' theme as shown in multiselect example. – bob Commented Sep 4, 2015 at 19:31
• Can you please share that example ? It'll be great – dark_shadow Commented Sep 4, 2015 at 19:42

1 Answer 1

Plunker example modified to not downloading 'select2.css'.

Try

<link rel="stylesheet" href="http://cdnjs.cloudflare./ajax/libs/select2/3.4.5/select2.css">