Kendo widgets- appearing twice

Question

I have included a simple kendo dropdown control in html5 page. I have used angular in my project.

The html code looks like:

<select id="locationsDropdown" kendo-drop-down-list>
                            <option>All Locations</option>
                            <option>Data 1</option>
                            <option>Data 2</option>
                            <option>Data 3</option>
                        </select>

The dropdown appears twice in the view. I have this problem with other kendo widgets as well. Can anyone help me solving this issue? Here is the image of how the dropdown looks in my application: http://tinypic.com/view.php?pic=jl6suf&s=8#.U58AzSg30iQ

There are two dropdowns as shown in the image.

Thanks.

This uses to happen when you initialize (accidentally) the widget twice. Could you create a JSFiddle/JSBin that reproduces it? — OnaBai, Jun 16 '14 at 18:14
i am not able to replicate the same here: http://jsfiddle.net/7NMmm/3/ is there any other way i can avoid widget initialization twicE? — user2439903, Jun 16 '14 at 19:41
:-( If your code is actually initializing it twice the question if finding out how / where. Any other _solution_ will have side effects (seeing the widget twice is just the tip of the iceberg). Did you try setting a breakpoint in the browser debugger where your initialize it and see if it is being invoked twice? — OnaBai, Jun 16 '14 at 21:56

score 0 · Answer 1 · answered Dec 17 '15 at 13:48

Had exactly the same issue and found that I had some leftover CSS styling on the "select" in a stylesheet included AFTER the Kendo stylesheets, the offending style was as follows.

select {
display: inline-block !important;
}

with this removed the additional control disappeared.

Hope this helps.

Kendo widgets- appearing twice

1 Answers1