Hi, I have used Kendo UI for Vue for quite some time now. I noticed that Kendo Dropdownlist components have the PopupAppendTo props to bind the dropdown to the element in template, while majority of the other components do not have and ending up appended to the body-tag (outside of <div id='app'>).
I'm quite surprised to see this because Vue.js only has control over the <div id='app'> element and Vue.js recommends against using body-tag. Why don't other components have this props as well so that Vue.js has full control over the Kendo UI components?
1 Answer, 1 is accepted
0
Hello Max,
The reason for the popups of the Kendo widgets to be appended to the body is to ensure correct positioning. If a popup is appended, for example, to a wrapper element generated for our widgets, it is possible to result in improper placement of the popup. The popup.appendTo configuration is given to the users so that they could make sure that a widget's popup will be positioned correctly. In the popup.appendTo example, you can see how the DropDownList's popup is appended to the div element containing the widget. Upon opening the dropdown, the popup is positioned slightly to the left.
Our Vue.js components are client-side wrappers for the jQuery widgets. The logic that generates and displays popups comes from the specific widget itself and not from the wrapper (Vue). That is the reason why we append popups to the body tag despite the good practices for VueJS.
Regards,
Martin
Progress Telerik
The reason for the popups of the Kendo widgets to be appended to the body is to ensure correct positioning. If a popup is appended, for example, to a wrapper element generated for our widgets, it is possible to result in improper placement of the popup. The popup.appendTo configuration is given to the users so that they could make sure that a widget's popup will be positioned correctly. In the popup.appendTo example, you can see how the DropDownList's popup is appended to the div element containing the widget. Upon opening the dropdown, the popup is positioned slightly to the left.
Our Vue.js components are client-side wrappers for the jQuery widgets. The logic that generates and displays popups comes from the specific widget itself and not from the wrapper (Vue). That is the reason why we append popups to the body tag despite the good practices for VueJS.
Regards,
Martin
Progress Telerik
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items