Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Disabled Checkboxes now showing black tick

8 Answers 291 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 31 Jan 2011, 01:12 PM
Hi,

On formviews and grids within my site the checkboxes now show a black tick in them.  Theme/Skin is Black.  Prior to Q3 2010 these checkboxes showed a slightly greyed out green tick (they are disabled to prevent users ticking them).

What CSS do I need to change to override this change?

Thanks,

Jon

8 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 01 Feb 2011, 10:11 AM
Hello Jon,

I have tested a few checkboxes - disabled, enabled checked and unchecked and it seems they work as expected in all major browsers:

<%@ 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">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="sm1" runat="server" />
    <telerik:RadFormDecorator ID="rfd1" runat="server" DecoratedControls="All" Skin="Black" />
    <asp:CheckBox ID="check1" runat="server" Enabled="true" Text="Enabled Unchecked Checkbox" />
    <asp:CheckBox ID="CheckBox1" runat="server" Enabled="false" Text="Disabled Unchecked Checkbox" />
    <asp:CheckBox ID="CheckBox2" runat="server" Checked="true" Enabled="true" Text="Enabled Unchecked Checkbox" />
    <asp:CheckBox ID="CheckBox3" runat="server" Checked="true" Enabled="false" Text="Disabled Unchecked Checkbox" />
    </form>
</body>
</html>

Could you open a support ticket and send us a simple sample project and / or an image showing the issue?

Another option is to ensure that you are using the latest version - Q3 Service Pack 2, and to test it again if the problem still exists.

Greetings,
Bojo
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
0
Jon
Top achievements
Rank 1
answered on 01 Feb 2011, 02:48 PM
checkbox-issue.png
Hi Bojo,

I've tried this and get the attached as a result.  The image shows it working OK on Chrome but not on IE. IE shows the last tick as black.

This is true with a stripped down website and the latest version...

Regards,

Jon
0
Bozhidar
Telerik team
answered on 01 Feb 2011, 03:29 PM
Hello Jon,

The current disabled ticked checkbox should be with dark thick but not green one. If you want to use the green tick for the disabled states, you could use the following CSS in the head section of your document:

<style type="text/css">
        .RadForm_Black .rfdInputDisabled.rfdCheckboxChecked,
        .RadForm_Black .rfdInputDisabled.rfdCheckboxChecked:hover
        {
            background-position: 0 -420px !important;
        }
</style>


All the best,
Bojo
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
0
Jon
Top achievements
Rank 1
answered on 01 Feb 2011, 05:09 PM
Many thanks Bojo,

I've just done it and it works - I added the following CSS to ensure that the unchecked disabled checkboxes had the same background shade as the one with the green tick.

.RadForm_Black .rfdInputDisabled.rfdCheckboxUnchecked, 
.RadForm_Black .rfdInputDisabled.rfdCheckboxUnchecked:hover
{
background-position: 0 0px ! important;
}

Thanks again for your help.

Regards,

Jon
0
Jon
Top achievements
Rank 1
answered on 25 Mar 2014, 09:03 AM
Hi,

The css work around from this is no longer working in the Q1 2014 release.  As before IE works OK but on chrome the rendering of a disabled checkbox appears as a black tick..

I've looked in the developer tools and there is some CSS overriding this, I'm not sure how to read it and get a work around to put in place - is it HTML5 rendering now?  

Regards

Jon
0
Accepted
Princy
Top achievements
Rank 2
answered on 25 Mar 2014, 11:57 AM
Hi Jon,

Please try the following CSS which works as expected for me.

CSS:
<style type="text/css">
    .RadForm.rfdCheckbox input[type="checkbox"][disabled]:checked, .RadForm.rfdCheckbox input[type="checkbox"][disabled]:checked:hover
    {
        background-position-y: -420px !important;
    }
    .RadForm_Black .rfdInputDisabled.rfdCheckboxChecked, .RadForm_Black .rfdInputDisabled.rfdCheckboxChecked:hover
    {
        background-position: 0 -420px !important;
    }
</style>

Thanks,
Princy.
0
Bozhidar
Telerik team
answered on 25 Mar 2014, 01:07 PM
Hello,

The solution provided by Princy Philip works fine on my side. Do not hestitate to contact us if you need further assistance.
0
Jon
Top achievements
Rank 1
answered on 25 Mar 2014, 01:24 PM
Thats great many thanks Princy.

The good thing is that it confirms that you can copy the code from Chrome dev tools - I'd seen the markup and thought that it wasn't usable.  
Tags
FormDecorator
Asked by
Jon
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Jon
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Share this question
or