Dropdown not displaying default icon

[BitShift]

For some reason my dropdown isnt displaying the arrow icon.  I think its a styling issue, but cant figure out which style is being overridden.  Im using a custom bootstrap theme, but have commented out all my variables, yet the arrow still wont show.  What can I check? 

      <div class="col-1">
        Customers<br />
        <kendo-dropdownlist [data]="customerdata"></kendo-dropdownlist>
      </div>

 

Im also looking at the "computed" styles in the chrome dev console.  Comparing to the default example here

https://www.telerik.com/kendo-angular-ui/components/dropdowns/

 

See attached images.  My

 

The example dropdown is rending the arrow like this

<span unselectable="on" class="k-select" ng-reflect-ng-class="[object Object]">
               <span class="k-i-arrow-s k-icon" ng-reflect-ng-class="[object Object]"></span>
</span>

 

Where as mine is being rendered as a k-input class

<span unselectable="on" class="k-input" ng-reflect-ng-class="[object Object]"><!--bindings={}--><!--bindings={
  "ng-reflect-ng-if": "true"
}--></span>

 

 

 

[BitShift]

My styles config in angular.json

            "styles": [
              "./node_modules/bootstrap/scss/bootstrap.scss",
              "src/mystyles.scss",
              "./node_modules/font-awesome/css/font-awesome.css"
            ]

 

 

mystyles.scss

//@import 'variables'; // the variables.scss file, located in the same folder
@import '~@progress/kendo-theme-bootstrap/scss/all'; // fetched from node_modules
// @import "~@progress/kendo-theme-default/scss/all";

 

I switched to the compiled version of bootstrap, replacing

this

          "styles": [
              "./node_modules/bootstrap/scss/bootstrap.scss",
              "src/mystyles.scss",
              "./node_modules/font-awesome/css/font-awesome.css"
            ]

 

with this,

            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/mystyles.scss",
              "./node_modules/font-awesome/css/font-awesome.css"
            ],

 

Now, I seem to get what I expect.

[BitShift]

No its not, sorry.  My bad, its still not showing the dropdown arrow icon

What do I need to check?

[BitShift]

mysetyls.scss

@import "~bootstrap/dist/css/bootstrap.css";
@import 'variables'; // the variables.scss file, located in the same folder
@import '~@progress/kendo-theme-bootstrap/scss/all'; // fetched from node_modules

 

[Dimiter Topalov]

Hi Randal,

If the issue is observed in IE only, you will need to un-comment IE from the browserlist file to enable proper rendering in this browser:

https://www.telerik.com/kendo-angular-ui-develop/components/styling/ (Installation --> bullet 3)

Other than this, the order of imports in the provided snippets seems correct.

The built-in rendering of the DropDownList renders separate "k-input" and "k-select" elements for the two parts of the DropDownList:





If the issue persists, can you please send us an isolated runnable project where we can observe the undesired layout and try to determine what might be causing it? Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[BitShift]

Thanks Dimiter.  One key difference in what Im doing (which might be part of the problem) is placing a kendo-dropdownlist inside a bootstrap grid.  If I take it out of the bootstrap grid, it renders the arrow icon.  This leads me to think I dont understand how to use kendo components with bootstrap just yet.

<div class="row" title="Info">
      <div class="col-1">
        test<br />
        <kendo-dropdownlist [(value)]="value" [data]="testdata"></kendo-dropdownlist>
      </div>

     

</div>

[Dimiter Topalov]

Hi Randal,

I will paste the same answer that resolved the issue, discussed in a private support thread too, here so others can benefit as well:

Indeed, the observed issue is caused by the max-width CSS rule, imposed by the col-1 class:



You can observe the effect of removing this rule in the screenshot above.

The default width of the DropDowns is 200px, but you can customize it via setting the style.width property:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/styling/

For example, this is how the page looks when all DropDowns have the following width set:

<div class="col-1">
        Customers<br />
        <kendo-dropdownlist [style.width.%]="100" [data]="customerdata"></kendo-dropdownlist>
      </div>

      <div class="col-1">
        Terminals<br />
        <kendo-dropdownlist [style.width.%]="100" [data]="customerdata"></kendo-dropdownlist>
      </div>
      <div class="col-1">
        Delivery Date<br />
        <kendo-dropdownlist [style.width.%]="100" [data]="customerdata"></kendo-dropdownlist>
      </div>
      <div class="col-1">
        Drivers<br />
        <kendo-dropdownlist [style.width.%]="100" [data]="customerdata"></kendo-dropdownlist>
      </div>

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik