Telerik Forums / UI for ASP.NET AJAX Forum / ComboBox /

Not Displaying correctly in chrome

Telerik UI for ASP.NET AJAX
Resources Buy Try

14 posts, 0 answers

Web Services

243 posts

Member since:
Apr 2008
Posted 23 Mar 2011 Link to this post

If you have a combo box on a page that scrolls, it doesn't display properly in chrome. Check out this image I attached to see what I mean.

image.png
Kalina
Admin

918 posts
Posted 28 Mar 2011 Link to this post

Hello Web Services,

We are aware of this issue - it occurs when the RadComboBox control is nested within a scrollable container.
I can suggest you to attach on page load a "scroll" event to the scrollable div.
Within the event function simply get the RadComboBox collection and close opened combo(or combos).

<script type="text/javascript" language="javascript">

    function pageLoad() {

        $telerik.$("#container").scroll(function() {

            var combos = Telerik.Web.UI.RadComboBox.ComboBoxes;

            if (combos != null) {

                for (var i = 0; i < combos.length; i++) {

                    var combo = combos[i];

                    if (combo.get_dropDownVisible())

                        combo.hideDropDown();

                }

            }

        });

    }

</script>

I prepared for you a sample page - please find it attached.
If the issue persists - please provide me more details about your implementation and a simplified page that illustrates it.

All the best,
Kalina
the Telerik team

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!

ScrollableDiv.zip
Web Services

243 posts

Member since:
Apr 2008

Posted 28 Mar 2011 Link to this post

Do you have to bind it in the code behind like you did? I just tried creating a static one, but it's not working. Here is the aspx page.

<%@ Page Title="" Language="VB" MasterPageFile="~/Main.master" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">



<script type="text/javascript" language="javascript">

    function pageLoad() {

        $telerik.$("#container").scroll(function() {

            var combos = Telerik.Web.UI.RadComboBox.ComboBoxes;

            if (combos != null) {

                for (var i = 0; i < combos.length; i++) {

                    var combo = combos[i];

                    if (combo.get_dropDownVisible())

                        combo.hideDropDown();

                }

            }

        });

    }

</script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="mainContentPlaceHolder" Runat="Server">

<div id="container" style="height: 100px; border: 1px solid red; overflow: auto;">

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            products 1:

            <telerik:RadComboBox ID="categories" runat="server">

            <Items>

                <telerik:RadComboBoxItem text="test" Value="test" />

                <telerik:RadComboBoxItem text="test" Value="test" />

                <telerik:RadComboBoxItem text="test" Value="test" />

                <telerik:RadComboBoxItem text="test" Value="test" />

            </Items>

            </telerik:RadComboBox>

            <br />

        </div>

</asp:Content>

Here is my master page.

<%@ Master Language="VB" CodeFile="Main.master.vb" Inherits="Main" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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></title>

    <asp:ContentPlaceHolder ID="head" runat="server">

    </asp:ContentPlaceHolder>

    <link rel="Stylesheet" type="text/css" href="Main.css" />

</head>

<body>

    <form id="form1" runat="server">

    <div id="header">

        <a href="~/admin/Default.aspx" runat="server">

            <img src="~/images/logo.jpg" style="border: none;" runat="server" /></a>

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">

        </telerik:RadScriptManager>

        <div style="float: right; right: 20px; top: 10px; position: absolute;">

            <asp:LoginStatus runat="server"></asp:LoginStatus>

        </div>

    </div>

    <div id="Main">

        <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" Width="100%"

            LiveResize="true" Height="520px">

            <telerik:RadPane ID="LeftRadPane1" runat="server" Width="220px" Scrolling="None"

                BorderStyle="None" BorderSize="0">

                <telerik:RadSplitter ID="radsplitter2" runat="server" Orientation="Horizontal" LiveResize="true">

                    <telerik:RadPane ID="RadPane2" runat="server" Width="220px" Scrolling="None" BorderStyle="None"

                        bordersize="0">



                        <telerik:RadPanelBar runat="server" ID="RadPanelBar1" ExpandMode="FullExpandedItem"

                            Height="100%" Width="220px">

                            <Items>

                                <telerik:RadPanelItem Text="Customers" Expanded="True">

                                    <Items>

                                        <telerik:RadPanelItem Text="Add Customer" NavigateUrl="~/Customers/AddCustomer.aspx" />

                                        <telerik:RadPanelItem Text="Customer List" NavigateUrl="~/Customers/CustomerList.aspx" />

                                    </Items>

                                </telerik:RadPanelItem>

                                <telerik:RadPanelItem Text="Leads">

                                    <Items>

                                        <telerik:RadPanelItem Text="Create Lead" NavigateUrl="~/Leads/CreateLead.aspx" />

                                        <telerik:RadPanelItem Text="Lead List" NavigateUrl="~/Leads/LeadList.aspx" id="leadList" />

                                    </Items>

                                </telerik:RadPanelItem>

                                 <telerik:RadPanelItem Text="Sales">

                                    <Items>

                                        <telerik:RadPanelItem Text="Sales List" NavigateUrl="~/Sales/SalesList.aspx" />

                                    </Items>

                                </telerik:RadPanelItem>

                                <telerik:RadPanelItem Text="Bids">

                                    <Items>

                                        <telerik:RadPanelItem Text="Bid List" NavigateUrl="~/Bids/BidList.aspx" />

                                    </Items>

                                </telerik:RadPanelItem>

                                <telerik:RadPanelItem Text="Jobs">

                                    <Items>

                                        <telerik:RadPanelItem Text="Jobs List" id="jobsList" NavigateUrl="~/Jobs/JobsList.aspx" />

                                        <telerik:RadPanelItem Text="Jobs Started" id="startList" NavigateUrl="~/Started/StartedList.aspx" />

                                    </Items>

                                </telerik:RadPanelItem>

                                <telerik:RadPanelItem Text="Administration" Visible="false">

                                    <Items>

                                        <telerik:RadPanelItem Text="Add Employees" NavigateUrl="~/admin/AddEmployees.aspx" />

                                        <telerik:RadPanelItem Text="Delete Employees" NavigateUrl="~/admin/DeleteEmployees.aspx" />

                                        <telerik:RadPanelItem Text="Add Products" NavigateUrl="~/admin/AddProducts.aspx" />

                                        <telerik:RadPanelItem Text="Edit Products" NavigateUrl="~/admin/EditProducts.aspx" />

                                        <telerik:RadPanelItem Text="Delete Products" NavigateUrl="~/admin/DeleteProducts.aspx" />

                                        <telerik:RadPanelItem Text="View Crew Chiefs" NavigateUrl="~/admin/CrewChiefList.aspx" />



                                    </Items>

                                </telerik:RadPanelItem>

                            </Items>

                        </telerik:RadPanelBar>



                    </telerik:RadPane>

                </telerik:RadSplitter>

            </telerik:RadPane>

            <telerik:RadSplitBar runat="server" ID="RadSplitBar2" CollapseMode="Forward" EnableResize="true"

                ForeColor='Green' />

            <telerik:RadPane ID="RightRadPane1" runat="server" CssClass="RightPanelPadding" Scrolling="Both"

                BorderStyle="None" BorderSize="0">

                <div style="margin-left: 10px;"><asp:ContentPlaceHolder ID="mainContentPlaceHolder" runat="server">

                </asp:ContentPlaceHolder></div>

            </telerik:RadPane>

        </telerik:RadSplitter>

    </div>

    </form>

</body>

</html>
Kalina
Admin

918 posts

Posted 31 Mar 2011 Link to this post

Hi Web Services,

Thank you for the code provided.
I created a sample and tried to reproduce the issue but without success.
Your code works properly on my side - please take a look at this demonstration video.
Maybe I miss something?

Regards,
Kalina
the Telerik team

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!
Web Services

243 posts

Member since:
Apr 2008

Posted 31 Mar 2011 Link to this post

I always look through your demos before I bother you guys here :). Is there an email I could send a link to with copy of my project?
Kalina
Admin

918 posts

Posted 31 Mar 2011 Link to this post

Hello Web Services,

I am not sure that I understand you.
At the video that I have recorded I am testing the application that I have created with your custom code.
Could you please take a look at it? Maybe I miss something?
What steps I need to perform in order to reproduce the issue?

Greetings,
Kalina
the Telerik team

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!
Web Services

243 posts

Member since:
Apr 2008

Posted 31 Mar 2011 Link to this post

I understand you have it working, but that is not how my page works, in mine I have a full page that you have to scroll. Check out the video I created. It could be an OS thing or 32 64 bit thing. That's why I wanted to send you my project.
Kalina
Admin

918 posts
Posted 05 Apr 2011 Link to this post

Hi Web Services,

I doubt that the issue can be OS related. Upon which browser it appears?
Please find the full code of the sample that I have created and try to reproduce the issue with it.
What is different in your implementation?
Can you change the sample in order to reproduce the issue and paste it here?
Thank you in advance.

Regards,
Kalina
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

ScrollableDiv.zip
Web Services

243 posts

Member since:
Apr 2008

Posted 11 Apr 2011 Link to this post

I took your test.aspx and pasted the code into my project and it doesn't work. Download the sample here http://www.intellicominc.com/temp/site.zip
Kalina
Admin

918 posts

Posted 15 Apr 2011 Link to this post

Hi Web Services,

I downloaded the modified sample and tried to reproduce the issue - but without success.
On my side the RadComboBox closes its dropdown properly upon mouse scroll - please take a look at this video.
Maybe there is something else that is different in your application and causes the issue?

Best wishes,
Kalina
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Web Services

243 posts

Member since:
Apr 2008

Posted 19 Apr 2011 Link to this post

Sorry, I thought I replied. I updated my dlls to the latest version I could get and that fixed the issue. Thanks for all of your help.
Shobhit

1 posts

Member since:
Dec 2012

Posted 04 Dec 2012 Link to this post

I am having same problem with Radcombo in Chrome.
You can check on 115.115.113.122/en. RadCombobox on appearing right on scrolling
Pavan Kumar

2 posts

Member since:
Sep 2012
Posted 27 Apr 2013 Link to this post

hello
i am getting the same problem in ie7.
can any one help me to resolve that problem

dropdown.png
Ivan Zhekov
Admin

651 posts

Posted 01 May 2013 Link to this post

Hi, Pavan.

This thread is a bit stale (no activity for two years), not mention it's about chrome and not IE7.

Please open a new ticket with more information as to what exactly is not working and if possible provide a snippet or a bigger screenshot of your app. It's quite hard to guess what's the issue if what we are seeing is just a tiny screenshot.

And lastly, but not least, you make sure you mention the version used in your ticket.

Regards,
Ivan Zhekov
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

Not Displaying correctly in chrome

Web Services

Kalina

Web Services

Kalina

Web Services

Kalina

Web Services

Kalina

Web Services

Kalina

Web Services

Shobhit

Pavan Kumar

Ivan Zhekov