Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

[Solved] RadComboBox in absolutely positioned div with overflow

3 Answers 253 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Brent
Top achievements
Rank 1
Brent asked on 23 Feb 2010, 06:41 AM
Hi all,

I have a RadComboBox which is inside an absolutely positioned div with overflow set to auto. The problem is that when you expand the RadComboBox and then scroll down with the cursor outside of the ComboBox, the list it items in the combo box becomes detached from the base of the Combo Box.

Here is my test code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Test Page</title> 
</head> 
<body style="overflow: hidden"> 
    <form id="form1" runat="server"> 
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
    <div style="position: absolute; top: 25px; left: 25px; right: 25px; bottom: 100px; 
        overflow: auto"> 
        test<br /> 
        <telerik:RadComboBox ID="RadComboBox1" runat="server"> 
            <Items> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
                <telerik:RadComboBoxItem Text="Test" /> 
            </Items> 
        </telerik:RadComboBox> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
        test<br /> 
    </div> 
    </form> 
</body> 
</html> 
 

Does anyone know of a solution to this?

Cheers!

Brent

PS I've already tried all of the solutions in this thread to no avail

PPS I'm using the Q3 2009 version of the ASP.Net AJAX controls.

3 Answers, 1 is accepted

Sort by
0
Accepted
Simon
Telerik team
answered on 24 Feb 2010, 08:15 PM
Hi Brent,

This is a known issue and you can resolve it by manually closing the drop down on scroll as shown in this KB article.

Kind regards,
Simon
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.
0
Brent
Top achievements
Rank 1
answered on 25 Feb 2010, 01:54 AM
Hi Simon,

Thanks for your reply. I've tried that and it has solved my problem. However, currently I'm having to add this fix for every RadComboBox on every page/control. Is it possible to use the Telerik.Web.UI.RadComboBox.ComboBoxes array which is available on the client side to do this given that most of our RadCombo boxes exist inside naming containers (FormViews, Panels, etc.)?

Thanks again for your help.

Brent
0
Brent
Top achievements
Rank 1
answered on 25 Feb 2010, 02:22 AM
I'm not sure why this wasn't working in the first instance, but I've now added the following code to my master page so that it will solve this problem for all RadComboBoxes on the page:

<script type="text/javascript"> 
    var workarea = document.getElementById("workarea"); 
    if (workarea != null) { 
        workarea.onscroll = function() { 
            for (var i = 0; i < Telerik.Web.UI.RadComboBox.ComboBoxes.length; i++) { 
                Telerik.Web.UI.RadComboBox.ComboBoxes[i].hideDropDown(); 
            } 
        } 
    }   
</script> 

Thanks for your assistance!
Tags
ComboBox
Asked by
Brent
Top achievements
Rank 1
Answers by
Simon
Telerik team
Brent
Top achievements
Rank 1
Share this question
or