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

Not Displaying correctly in chrome

13 Answers 315 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Web Services
Top achievements
Rank 2
Web Services asked on 23 Mar 2011, 03:18 PM
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.

13 Answers, 1 is accepted

Sort by
0
Kalina
Telerik team
answered on 28 Mar 2011, 04:25 PM
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
0
Web Services
Top achievements
Rank 2
answered on 28 Mar 2011, 05:46 PM
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">
<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>

0
Kalina
Telerik team
answered on 31 Mar 2011, 10:00 AM
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
0
Web Services
Top achievements
Rank 2
answered on 31 Mar 2011, 01:36 PM
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?
0
Kalina
Telerik team
answered on 31 Mar 2011, 01:51 PM
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
0
Web Services
Top achievements
Rank 2
answered on 31 Mar 2011, 02:17 PM
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. 
0
Kalina
Telerik team
answered on 05 Apr 2011, 05:50 PM
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
0
Web Services
Top achievements
Rank 2
answered on 11 Apr 2011, 09:29 PM
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
0
Kalina
Telerik team
answered on 15 Apr 2011, 05:52 AM
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.

0
Web Services
Top achievements
Rank 2
answered on 19 Apr 2011, 02:49 PM
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.
0
Shobhit
Top achievements
Rank 1
answered on 04 Dec 2012, 01:08 PM
I am having same problem with Radcombo in Chrome. 
You can check on 115.115.113.122/en. RadCombobox on appearing right on scrolling
0
Pavan Kumar
Top achievements
Rank 1
answered on 27 Apr 2013, 12:06 PM
hello 
i am getting the same problem in ie7.
can any one help me to resolve that problem

0
Ivan Zhekov
Telerik team
answered on 01 May 2013, 08:20 AM
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.
Tags
ComboBox
Asked by
Web Services
Top achievements
Rank 2
Answers by
Kalina
Telerik team
Web Services
Top achievements
Rank 2
Shobhit
Top achievements
Rank 1
Pavan Kumar
Top achievements
Rank 1
Ivan Zhekov
Telerik team
Share this question
or