Not Displaying correctly in chrome

14 posts, 0 answers
  1. Web Services
    Web Services avatar
    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.
  2. Kalina
    Admin
    Kalina avatar
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Web Services
    Web Services avatar
    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">
    <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>

  5. Kalina
    Admin
    Kalina avatar
    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
  6. Web Services
    Web Services avatar
    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?
  7. Kalina
    Admin
    Kalina avatar
    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
  8. Web Services
    Web Services avatar
    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. 
  9. Kalina
    Admin
    Kalina avatar
    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
  10. Web Services
    Web Services avatar
    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
  11. Kalina
    Admin
    Kalina avatar
    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.

  12. Web Services
    Web Services avatar
    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.
  13. Shobhit
    Shobhit avatar
    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
  14. Pavan Kumar
    Pavan Kumar avatar
    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

  15. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017