Disabled RadioButton and CheckBox are displayed as Selected em IE6

2 posts, 1 answers
  1. milak the
    milak the avatar
    20 posts
    Member since:
    Mar 2010

    Posted 31 Aug 2011 Link to this post

    I have a problem when using the RadFormDecorator.
    In IE6, when I disable a RadioButtonList (also with RadioButton, CheckBox and CheckBoxList), they are displayed as selected, only the display, but the controls are not really selected.

    The following example:
    <asp:RadioButtonList ID="rbl_radio_list" runat="server" Enabled="false">
        <asp:ListItem Text="Radio List Item 1" Value="1"></asp:ListItem>
        <asp:ListItem Text="Radio List Item 2" Value="2"></asp:ListItem>
        <asp:ListItem Text="Radio List Item 3" Value="3"></asp:ListItem>
    </asp:RadioButtonList>
     
    <asp:RadioButton ID="rdb_radio" runat="server" Text="Radio 1" Enabled="false" Checked="false"/>
     
    <asp:CheckBoxList ID="cbl_check_list" runat="server" Enabled="false">
        <asp:ListItem Text="Check List Item 1" Value="1"></asp:ListItem>
        <asp:ListItem Text="Check List Item 2" Value="2"></asp:ListItem>
        <asp:ListItem Text="Check List Item 3" Value="3"></asp:ListItem>
    </asp:CheckBoxList>
     
    <asp:CheckBox ID="cbx_check" runat="server" Text="Check 1" Enabled="false" Checked="false" />
     
    <telerik:RadFormDecorator ID="rfd_radio" runat="server" DecoratedControls="RadioButtons"  />
    <telerik:RadFormDecorator ID="rfd_check" runat="server" DecoratedControls="CheckBoxes"  />

  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 01 Sep 2011 Link to this post

    Hi Milak,

    Hi Milak,

    As IE6 is pretty old browser, it does not support marged CSS selecotrs, that`s why in some cases it will not be 100% consistent to modern browsers released today. To have it work, you could use the following CSS fix:

    <%@ 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>
        <style type="text/css">
             
            *html .rfdRadioUnchecked,
            *html .rfdRadioUnchecked:hover
            {
                background-position: 1px 0 !important;
            }
             
            *html .rfdRadioChecked,
            *html .rfdRadioChecked:hover
            {
                background-position: 1px -440px !important;
            }
             
            *html .rfdCheckboxUnchecked,
            *html .rfdCheckboxUnchecked:hover
            {
                background-position: 0 0; !important;
            }
             
            *html .rfdCheckboxChecked,
            *html .rfdCheckboxChecked:hover
            {
                background-position: 1px -420px !important;
            }
             
        </style>
    </head>
    <body style="direction: ltr;">
        <form id="form1" runat="server">
        <asp:ScriptManager ID="rs1" runat="server">
        </asp:ScriptManager>
        <asp:RadioButtonList ID="rbl_radio_list" runat="server" Enabled="false">
            <asp:ListItem Text="Radio List Item 1" Value="1"></asp:ListItem>
            <asp:ListItem Text="Radio List Item 2" Value="2"></asp:ListItem>
            <asp:ListItem Text="Radio List Item 3" Value="3"></asp:ListItem>
        </asp:RadioButtonList>
        <asp:RadioButton ID="rdb_radio" runat="server" Text="Unchecked Enabled Radio" Enabled="true"
            Checked="false" />
        <asp:RadioButton ID="RadioButton1" runat="server" Text="Checked Enabled Radio" Enabled="true"
            Checked="true" />
        <asp:RadioButton ID="RadioButton2" runat="server" Text="Unchecked Disabled Radio"
            Enabled="false" Checked="false" />
        <asp:RadioButton ID="RadioButton3" runat="server" Text="Checked Disabled Radio" Enabled="false"
            Checked="true" />
        <asp:CheckBoxList ID="cbl_check_list" runat="server" Enabled="false">
            <asp:ListItem Text="Check List Item 1" Value="1"></asp:ListItem>
            <asp:ListItem Text="Check List Item 2" Value="2"></asp:ListItem>
            <asp:ListItem Text="Check List Item 3" Value="3"></asp:ListItem>
        </asp:CheckBoxList>
        <asp:CheckBox ID="cbx_check" runat="server" Text="Unchecked Checkxbox Enabled" Enabled="true"
            Checked="false" />
        <asp:CheckBox ID="CheckBox1" runat="server" Text="Checked Checkxbox Enabled" Enabled="true"
            Checked="true" />
        <asp:CheckBox ID="CheckBox2" runat="server" Text="Unchecked Checkxbox Disabled" Enabled="false"
            Checked="false" />
        <asp:CheckBox ID="CheckBox3" runat="server" Text="Checked Checkxbox Disabled" Enabled="false"
            Checked="true" />
        <telerik:RadFormDecorator ID="rfd_radio" runat="server" DecoratedControls="RadioButtons" />
        <telerik:RadFormDecorator ID="rfd_check" runat="server" DecoratedControls="CheckBoxes" />
        </form>
    </body>
    </html>

    Now the checkboxes itself would not be disabled, but the text will be and the element will look disabled in IE6 browser.

    Best wishes,
    Bojo
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top