CSS Bug in UI for ASP.NET AJAX

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

CSS Bug

8 Answers 54 Views

ComboBox

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

8 Answers, 1 is accepted

answered on 14 Mar 2011, 02:47 PM

Hi Kate,

Thanks for looking into this; I apologize for wasting your time. It appears that a RadFormDecorator has to be present on the page for this to occur. The forum does not allow upload of a zip, so here is the markup to reproduce it:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 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 id="Head1" runat="server">

<title></title>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

</head>

<body>

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

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

</telerik:RadScriptManager>

<telerik:RadSkinManager runat="server" ID="SkinManager1" Skin="Forest">

</telerik:RadSkinManager>

<telerik:RadFormDecorator runat="server" ID="FormDecorator" DecoratedControls="All" />

<telerik:RadComboBox runat="server" ID="rcbCombo" Width="120px" Enabled="false"></telerik:RadComboBox>

<telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel">

</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxManager runat="server" ID="AjaxManager1">

</telerik:RadAjaxManager>

</form>

</body>

</html>

If the FormDecorator is removed, the combo box will behave normally. This occurs with all of the default Telerik skins. I am using Q3 2010 with the 1304 hotfix applied.

Thank you.

answered on 16 Mar 2011, 09:49 AM

Hello Josh,

The problem comes really from RadFromDecorator. It should not apply its styles to the comobo box in that case, but for some reason it does. To fix that issue you could use the following CSS fix in the head of your application. I have tested it in IE7, IE8, IE8, Opera and Webkit browsers and everything seems ok:

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

<style type="text/css">

.rcbInputCell .rfdInputDisabled,

.rcbInputCell .rfdDecorated

{

background-color: transparent !important;

height: auto !important;

border: 0 !important;

}

</style>

</head>

<body>

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

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

</telerik:RadScriptManager>

<telerik:RadSkinManager runat="server" ID="SkinManager1" Skin="Forest">

</telerik:RadSkinManager>

<telerik:RadFormDecorator runat="server" ID="FormDecorator" DecoratedControls="All" />

<telerik:RadComboBox runat="server" ID="rcbCombo" Width="120px" Enabled="false">

</telerik:RadComboBox>

<telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel">

</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxManager runat="server" ID="AjaxManager1">

</telerik:RadAjaxManager>

</form>

</body>

</html>

All the best,
Bojo
the Telerik team

Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!

answered on 01 Apr 2011, 08:41 PM

Combobox.png

I am having a similar issues. I have the form decorator (although it doesn't seem to affect my problem).

Whenever I have more than one combobox on a page, the arrow image seems to off by just a bit. It is not a huge deal, but I haven't found any way to fix it. It is really strange.

answered on 04 Apr 2011, 08:44 AM

Hi Todd,

I have tried to reproduce the reported problem with the following code, but to no avail:

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

<!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 id="Head1" runat="server">

<title></title>

<style type="text/css">

</style>

</head>

<body>

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

<div>

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

</telerik:RadScriptManager>

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Vista" DecoratedControls="All" />

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

<Items>

<telerik:RadComboBoxItem Text="item1" />

</Items>

</telerik:RadComboBox>

<br />

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

<Items>

<telerik:RadComboBoxItem Text="item1" />

</Items>

</telerik:RadComboBox>

</div>

</form>

</body>

</html>

Would you check if I am doing everything as you did? You could open a support ticket and to send us a the code that reproduces the issue or live url where we will be able to test it.

Kind regards,
Bojo
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 04 Apr 2011, 01:16 PM

TelerikIE9CssDropDown.png

Actually, I removed all my css that applied to table elements and I got it fixed. However, the issue still exists, but only in IE9. The issue appears in your demo application when viewed in IE9. Maybe you and MS can work together on a solution.

answered on 04 Apr 2011, 02:47 PM

combo.gif

Hi Todd,

Please find attached combo.gif showing our Combo first look demo page in IE9 - I can`t see any rendering issues. However if your browser is zoomed in ("ctrl and +") or zoomed out ("ctrl and -"), similar issue could appear, but this is not related to our control, but to the way IE behaves when browser is zoomed. make sure, that your browser is set to zoom: 100% ("ctrl + 0") and check again. Everything should be OK.

All the best,
Bojo
the Telerik team