This is a migrated thread and some comments may be shown as answers.

Dropdown not displaying default icon

6 Answers 1950 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

BitShift asked on 12 Jul 2018, 01:54 PM

clipboard03.png

dropdown-my-computed-styles.png

dropdown-default-computed-styles.png

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

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

6 Answers, 1 is accepted

answered on 12 Jul 2018, 02:24 PM

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.

answered on 16 Jul 2018, 08:30 AM

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

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 19 Jul 2018, 01:34 PM

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>

answered on 23 Jul 2018, 08:23 AM

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

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.