Disabled Checkboxes now showing black tick

9 posts, 1 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 31 Jan 2011 Link to this post

    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
  2. Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 01 Feb 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 01 Feb 2011 Link to this post

    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
  5. Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 01 Feb 2011 Link to this post

    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.
  6. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 01 Feb 2011 Link to this post

    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
  7. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 25 Mar 2014 in reply to Jon Link to this post

    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
  8. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 25 Mar 2014 in reply to Jon Link to this post

    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.
  9. Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 25 Mar 2014 Link to this post

    Hello,

    The solution provided by Princy Philip works fine on my side. Do not hestitate to contact us if you need further assistance.
  10. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 25 Mar 2014 in reply to Princy Link to this post

    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.  
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017