Kendo style issue - UI elements out of place

Question

I have a Kendo DropDownList on an Angular MVC project. Chrome (Version 40.0.2214.111 m) and IE10 renders it as 2 elements side-by-side. This issue remains with all Kendo elements with 2 HTML elements, such as NumericTextBoxs. Is this a bug? Is there a fix for it?

Kendo DropDownList out of place element Kendo NumericTextBox out of place element

This is how the HTML looks:

enter image description here

This is how I declare the drop down list

    <div class="col-md-3">
        <h4>Name: </h4>
        <select kendo-drop-down-list style="width: 200px">
            <option>Name 1</option>
            <option>Name 2</option>
            <option>Name 3</option>
            <option>Name 4</option>
        </select>
   </div>

Kendo style sheets is conflicted with other used styles in your project. Track css rules effects. — Amirhossein Mehrvarzi, Feb 15 '15 at 16:51
Just inspect element by browser and see affected css rules to your elements :) — Amirhossein Mehrvarzi, Feb 15 '15 at 21:17
Thanks. You were right! It was a custom css rule that was overriding the default kendo style — SharkTiles, Feb 15 '15 at 23:48

score 1 · Answer 1 · answered Feb 16 '15 at 09:12

1

Just inspect element by browser and see affected css rules to your page elements. You may wanna change some of them to work with each other.

answered Feb 16 '15 at 09:12

Amirhossein Mehrvarzi

18,024
7
45
70

Kendo style issue - UI elements out of place

1 Answers1