CODEWITHSUNDEEP
javascriptangularjskendo-ui
Dima R.
Dima R.

Reputation: 997

Kendo ui comboBox not scrollable

My Kendo ui drop down is corupted in its look and feel It does not show scroll bar. Here is how I am defining and using it (using angularJS)

HTML:

<kendo-combo-box
ng-init="productFindCtrl.init()"
   k-data-source="productFindCtrl.getProductsDS()"
   k-data-text-field="'productId'"
   k-data-value-field="'productId'"  
   k-min-length="3"
   k-filter="'startswith'"
   k-select="productFindCtrl.selectProduct"
   style="width: 55%">
</kendo-combo-box>

Javascript code (for controller)

controller: function($scope, $http){
        var instance = this;
        
        this.init = function () {                
            $http.get("http://theUrlToResourceGoesHere?param=value").then(                    
                function (response) {
                    //SUCCESS
                    console.log("SUCCESSFUL FOR PRODUCTS") ;
                    instance.products = response.data.products;
                    instance.metadata = response.data.metadata;
                    
                    console.log("Products: "+instance.products) ;                       
                },
                function (response) {
                    console.log("ERROR LOADING JSON DATA") ;
                });
         
        }; //end of productFindCtrl.init()
        
        //get productsDS
        this.getProductsDS = function(){
            return instance.products;
        }
    },

The result is a messy drop down / combobox. I get the same problem trying to use either widget.

enter image description here

But, when I look at the samples, they do exactly the same things and they have a very properly looking drop downs, etc... What's wrong here?

Upvotes: 1

Views: 1157

Answers (2)

Jorge Fuentes Gonz&#225;lez
Jorge Fuentes Gonz&#225;lez

Reputation: 11809

This happened to me and I had all the required CSS and such. I fixed it by adding:

.k-list-scroller {
    position: relative;
    overflow: auto;
}

to my CSS file.

The problem is that this code is not defined in kendo.common.css, which is the default css file, but defined in kendo.common-material.css which you have to use only if you want to use Material or Material Black themes.

Upvotes: 2

dimodi
dimodi

Reputation: 4139

  • Make sure the Kendo UI JavaScript and CSS files are from the same version.
  • If this is true, try removing non-Kendo UI CSS styles from the page to check for CSS conflicts.
  • Make sure the page has a DOCTYPE and the browser displays it in Standards mode, not Quirks mode.

Upvotes: 1

Related Questions