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

The code generated by the dropdownlist is not inside the html element.

4 Answers 173 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
alexi
Top achievements
Rank 1
alexi asked on 05 Aug 2013, 09:32 AM
Hello,

we have a problem with the code generated by the drop down list component, in fact, if i put a <Select> element inside a <div> and use it with the dropdownlist component, the code generated by the dropdownlist is not inside the div but at the end of the <body>

As we work on a single web page application with backbone, we have to create dynamically some views using kendo components. And each time we create a component the code generated is outside the box.

We found a workaround to fix this but we had to override so many kendo css style to make it work that this solution is not satisfying.
The workaround is to add the class name "k-group" on the <div>.

So, could you give us the best way to have the code generated by kendo components inside the html elements ?

Thanks for your support,

Best regards,

Alexis

4 Answers, 1 is accepted

Sort by
0
Jeff
Top achievements
Rank 1
answered on 05 Aug 2013, 06:51 PM
I'd just like to say that I also have experienced several annoyances with this detail and recommend you submit it as a feature change request in the feedback portal.

In my case, I was listening for click events globally and needed to ignore those on the dropdown box. What I ended up doing as a workaround was to look at the id attribute of the click target (or its ancestors) because they use your defined id as a prefix. For example, if I name my dropdownlist "myDropDown," the generated options box has the id "myDropDown-list." Unfortunately, there's still a container div that holds no similarities with your id, but you can always look at the ".km-popup" class for that.

Hope that helps even a little bit,

Jeff
0
Atanas Korchev
Telerik team
answered on 07 Aug 2013, 07:49 AM
Hi guys,

 The dropdown element is intentionally attached in the body element. The reason for this is that it must always be visible. If this weren't the case any parent element with overflow:hidden or overflow:scroll would have clipped the dropdown.

Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Accepted
Dimo
Telerik team
answered on 07 Aug 2013, 08:38 AM
Hello,

Most of the popups used by Kendo UI are deliberately rendered as children of the <body> elements. This ensures they really act as popups, appear on top of all other content and are not constrained by scrollable containers.

The k-group workaround is valid. I am not sure why do you need to override "so many" Kendo UI styles. In standard scenarios the following should be enough:

<div class="k-group" style="position:relative;background:none">
    ... DropDownList here ...
</div>


Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
alexi
Top achievements
Rank 1
answered on 08 Aug 2013, 11:16 AM
The style you gave me works as a charm.

Perfect !!

Thanks a lot Dimo.

Alexi
Tags
DropDownList
Asked by
alexi
Top achievements
Rank 1
Answers by
Jeff
Top achievements
Rank 1
Atanas Korchev
Telerik team
Dimo
Telerik team
alexi
Top achievements
Rank 1
Share this question
or