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

Not Displaying correctly in chrome

13 Answers 399 Views

ComboBox

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

13 Answers, 1 is accepted

answered on 28 Mar 2011, 04:25 PM

ScrollableDiv.zip

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!

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

products 1:

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

<Items>

<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 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>

answered on 05 Apr 2011, 05:50 PM

ScrollableDiv.zip

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

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.