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

Dropdownlist hovering problem

1 Answer 246 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Jordon
Top achievements
Rank 1
Jordon asked on 01 Apr 2013, 07:24 PM
Hi, I have a kendo dropdownlist in a div on my page and I am trying to create a hover effect where when the user hovers over that general area the list will fade in/out. The problem I have is that when a user clicks on the dropdown and then hovers over the list of items, the main dropdown box fades out. I understand this happens because the list is not within my defined 'hovering' area so the fade out gets triggered.

My question is how can I set it up so that even when a user hovers over the list portion the dropdown should still be showing.

<div class="video">
    <div class="headers" style="position:absolute;display:none;">
        <input id="tracks" data-bind="kendoDropDownList: tracks" />
    </div>
    <iframe id="VideoFrame" frameborder="0" width="100%" height="100%"></iframe>
</div>

$('.video', element).hover(function() {
       $(this).find('.headers').fadeToggle('fast');
});

1 Answer, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 03 Apr 2013, 08:21 AM
Hi Jordon,

 
Basically loading the animation container of the dropDownList to another element in the DOM is not supported out-of-the-box, however you can try moving it using the open event of the DropDownList:

open: function () {
    setTimeout(function() {
        $(".headers").after($(".k-animation-container"));
    })
}
Kind regards,
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
DropDownList
Asked by
Jordon
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or