CODEWITHSUNDEEP
cssangularjskendo-ui
Jesse Liberty
Jesse Liberty

Reputation: 1424

Style in KendoUI with AngularJS

Creating a simple KendoUI drop down list using AngularJS. Not seeing the drop down with the correct styling.

Here's the html...

<div ng-controller="welcome2 as vm">
<select kendo-drop-down-list k-options="vm.phoneOptions"></select>
</div>

The js file:

(function () {
   'use strict';
  angular.module('app')
  .controller('welcome3',
  [welcome3]);

function welcome3() {
  var vm = this;
  vm.activate = activate;

  activate();

  function activate() {
     vm.phoneOptions = {
        dataSource: {
            data: [
               {name: "iPhone"},
               {name: "Droid"},
               {name: "Windows"}
            ]
        },
        dataTextField: "name",
        dataValueField: "id",
        optionLabel: "Select a phone..."
     };

    }
}
})();

Inside the index.js file I have (among other things) the following:

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">

<link href="content/bootstrap.css" rel="stylesheet" />
<link href="content/kendo.common.min.css" rel="stylesheet" />
<link href="content/kendo.default.min.css" rel="stylesheet.css" />
</head>
<body>
   // ...

<div ng-view></div>

<script src="scripts/jquery.min.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/kendo.all.min.js"></script>
<script src="scripts/angular-kendo.js"></script>
//....
<script src="app/welcome/welcome3.js"></script>
</body>
</html>

The drop down looks like this:

ugly drop down

As opposed to this:

nice drop down

Thanks!!

Upvotes: 1

Views: 918

Answers (1)

Burke Holland
Burke Holland

Reputation: 2337

Usually when you have an unstyled control like that, it's because you have a wrong stylesheet link. It looks like the common file is linked right, but check the other. Also, when using Bootstrap, make sure to use the common-bootstrap CSS file.

http://trykendoui.telerik.com/@burkeholland/UXav

Upvotes: 1

Related Questions