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

CSS Bug

Telerik UI for ASP.NET AJAX
Resources Buy Try

9 posts, 0 answers

Josh

61 posts

Member since:
Dec 2009
Posted 11 Mar 2011 Link to this post

Hello,

In IE7, the RadComboBox has a small display bug when the Enabled property is set to false. When hovered, the combobox seems to grow vertically by a couple pixels and an extra portion of the sprite appears at the bottom. This happens with every skin. I have attached an image to clarify.

Thanks,
Josh

combobox-disabled-hover.PNG
Kate
Admin

1898 posts

Posted 12 Mar 2011 Link to this post

Hi Josh,

I tested the issue but I do not seem to get the problem that you encounter. Do you use a customized skin or some of the Default once? You can send us a sample project with the reproduced issue, so we can help you solve it.

Greetings,
Kate
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!
Josh

61 posts

Member since:
Dec 2009

Posted 14 Mar 2011 Link to this post

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.
Bozhidar
Admin

693 posts

Posted 16 Mar 2011 Link to this post

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!
Todd Hile-Hoffer

19 posts

Member since:
Dec 2008
Posted 01 Apr 2011 Link to this post

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.

Combobox.png
Bozhidar
Admin

693 posts

Posted 04 Apr 2011 Link to this post

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

                <telerik:RadComboBoxItem Text="item1" />

            </Items>

        </telerik:RadComboBox>

        <br />

        <br />

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

            <Items>

                <telerik:RadComboBoxItem Text="item1" />

                <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
Todd Hile-Hoffer

19 posts

Member since:
Dec 2008
Posted 04 Apr 2011 Link to this post

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.

TelerikIE9CssDropDown.png
Bozhidar
Admin

693 posts
Posted 04 Apr 2011 Link to this post

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

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

combo.gif
Todd Hile-Hoffer

19 posts

Member since:
Dec 2008

Posted 04 Apr 2011 Link to this post

Sorry about that. I must have inadvertently zoomed my browser. When reset to normal it appears fine. Thanks.

CSS Bug

Josh

Kate

Josh

Bozhidar

Todd Hile-Hoffer

Bozhidar

Todd Hile-Hoffer

Bozhidar

Todd Hile-Hoffer