radio buttons and checkboxes are not visible on Chrome and Safari

26 posts, 0 answers
  1. Frank Jamae
    Frank Jamae avatar
    2 posts
    Member since:
    Aug 2009

    Posted 23 Feb 2010 Link to this post

    Neither my radio buttons nor checkboxes are displayed on Chrome or Safari. Any clue why? Here is an example how I use one (checkbox): (sample image is also attached)


    <form id="form1" runat="server"
             
                <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="all"></telerik:RadFormDecorator> 
     
            <%-- other form controls --%> 
     
                <asp:Label ID="lblRememberMe" CssClass="rememberMe" AssociatedControlID="chkRememberMe" runat="server" Text="remember me"></asp:Label> 
                <asp:CheckBox ID="chkRememberMe" runat="server" /> 
     
        </form> 

    Any help is appreciated.

  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7206 posts
    Member since:
    Dec 2014

    Posted 24 Feb 2010 Link to this post

    Hello Frank,

    The code that you posted looks OK and when I tested it on my side, everything was working as expected (see attached screenshot). I just noticed that you have a CssClass property assigned to the label - note that if such property is set, RadFormDecorator will not style the corresponding control - in such case we assume that the developer wants to administrate the look of that control.


    Best wishes,
    Georgi Tunev
    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.

  3. Frank Jamae
    Frank Jamae avatar
    2 posts
    Member since:
    Aug 2009

    Posted 24 Feb 2010 Link to this post

    It's not that css class, I can remove it and still the radio buttons and check boxes do not show up in webkit based browsers. I noticed that the rendered markup is different in broswers:


    Here is the source code (only for the check box) in firefox 3.5: 
    <input type="checkbox" name="ctl00$mainContent$ctrlLogin$chkRememberMe" id="ctl00_mainContent_ctrlLogin_chkRememberMe" _rfddecoratedid="_rfdSkinnedctl00_mainContent_ctrlLogin_chkRememberMe" class="rfdRealInput"
    <label for="ctl00_mainContent_ctrlLogin_chkRememberMe" unselectable="on" id="_rfdSkinnedctl00_mainContent_ctrlLogin_chkRememberMe" class=" rfdCheckboxUnchecked">&nbsp;</label> 

    Here is the source code (only for the checkbox) in IE8:
    <INPUT id=ctl00_mainContent_ctrlLogin_chkRememberMe class=rfdRealInput type=checkbox name=ctl00$mainContent$ctrlLogin$chkRememberMe _rfddecoratedID="_rfdSkinnedctl00_mainContent_ctrlLogin_chkRememberMe"
    <LABEL id=_rfdSkinnedctl00_mainContent_ctrlLogin_chkRememberMe class=" rfdCheckboxUnchecked" for=ctl00_mainContent_ctrlLogin_chkRememberMe unselectable="on">&nbsp;</LABEL> 

    Here is the source code (only for the checkbox) in chrome 4.0:
    <input id="ctl00_mainContent_ctrlLogin_chkRememberMe" type="checkbox" name="ctl00$mainContent$ctrlLogin$chkRememberMe" /> 

    you can see that Firefox and IE are identical but chrome is missing the generated, empty <label>

    Thanks

  4. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7206 posts
    Member since:
    Dec 2014

    Posted 25 Feb 2010 Link to this post

    Hi Frank,

    We are using different mechanism for skinning the controls in webkit browsers - more information on the subject is available here:
    http://blogs.telerik.com/martinivanov/posts.aspx
    Please open a support ticket and send us a full sample project where this issue could be reproduced - we will check it and do our best to help.


    Greetings,
    Georgi Tunev
    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.

  5. Fit2Page
    Fit2Page avatar
    262 posts
    Member since:
    Feb 2007

    Posted 29 Mar 2010 Link to this post

    I have the same problem. What could be the source of this problem?

    BR,
    Marc

  6. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7206 posts
    Member since:
    Dec 2014

    Posted 01 Apr 2010 Link to this post

    Hi Marc,

    As I said in my previous reply, we are using different mechanism for skinning the controls in WebKit browsers, so if you are using a custom skin where there is no WebKit-related CSS present, such problem might occur. If you examine the original external skins, you will notice a WebKit section in the CSS' comments - please make sure that they exist in your custom skin as well.

    If this doesn't help or your case is different, please send us a small sample project where this issue could be reproduced and we will check it right away.


    Kind regards,
    Georgi Tunev
    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.

  7. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 02 Oct 2010 Link to this post

    Hi,

    I have the same problem, the checkbox is not displayed with the custom skin in the chrome browser (View the attaced image).
    Here is some code which I use to enable the custom skins:
    Aspx

    <

     

     

    link rel="stylesheet" type="text/css" href="Skins/FormDecorator/00ccff/FormDecorator.00ccff.css" />

     


    <

     

     

    telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" Skin="00ccff" EnableEmbeddedSkins="false" DecoratedControls="CheckBoxes" DecorationZoneID="00ccffZoneID" />

    c# code:
    "

     

     

    Table _checkBoxesTable = new Table();

     

     

     

    foreach (DataRow _row in CtgryLstDataTable.Rows)

     

    {

     

     

    TableRow checkBoxesRow = new TableRow();

     

    checkBoxesRow.ID =

     

    "checkBoxesRow" + _row["CtgryID"].ToString();

     

    checkBoxesRow.Height = 30;

     

     

    TableCell checkBoxesCell = new TableCell();

     

    checkBoxesCell.ID =

     

    "checkBoxesCell" + _row["CtgryID"].ToString();

     

    checkBoxesCell.Controls.Add(

     

    new LiteralControl("<span id='" + _row["CtgryColr"].ToString() + "ZoneID'>"));

     

    checkBoxesCell.Controls.Add((CreateCheckBox(_row[

     

    "CtgryName"].ToString().Replace("&", "").Replace(" ", ""), _row["CtgryName"].ToString())));

     

    checkBoxesCell.Controls.Add(

     

    new LiteralControl("</span>"));

     

    checkBoxesRow.Cells.Add(checkBoxesCell);

    _checkBoxesTable.Rows.Add(checkBoxesRow);

    }

    CheckBoxesPanel.Controls.Add(_checkBoxesTable);


    "

    According to the above code, the checkboxes are displyed with the custom skin in all browsers instead of the chrome browser, why? and what I should change in my code in order fix that problem?

    Please, I need your help.

    Regards,
    Bader

  8. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7206 posts
    Member since:
    Dec 2014

    Posted 04 Oct 2010 Link to this post

    Hello Bader,

    Your code looks OK and at this point we cannot tell what the reason for the problem might be. Please open a support ticket and send us a sample project along with your custom skin where we could reproduce the problem. We will check it and get back to you right away.


    Kind regards,
    Georgi Tunev
    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

  9. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 07 Oct 2010 Link to this post

    Hi,

    Thank you for your reply,
    I built a sample application which contains the bug (WebSites.rar), please run it,
    <ADMIN: Please do not post links to applications that contains DEV version of the controls>
    Please, I need your help in order to solve the problem,
    It is appreciated to send me the modified code,

    Regards,
    Bader 

  10. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7206 posts
    Member since:
    Dec 2014

    Posted 08 Oct 2010 Link to this post

    Hello Bader,

    This is happening because the skinning of the controls in Safari / Chrome is done entirely by CSS and the image sprite is overwritten by the next skin.
    In your specific case I suggest to change the CSS of the skins and to include the name of the zone that you decorate.
    e.g. (in the cc00ff skin)

    /* the styling of radiobuttons and checkboxes in Safari and Chrome is already fully achieved with CSS */
    @media screen and (-webkit-min-device-pixel-ratio: 0)
    {
        /* checkboxes */
        #cc00ffZoneID input[type="checkbox"],
        #cc00ffZoneID input[type="checkbox"][disabled]:hover
        {
            background-image: url('CheckBox/CheckBoxSprites.gif');
        }
    }


    Greetings,
    Georgi Tunev
    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

  11. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 08 Oct 2010 Link to this post

    Hello,

    Thank you for your reply, It was helpful,
    Unfortunatily, I need to add the RadFormDecorator dynamicly using the following code:

    foreach (DataRow _row in CtgryLstDataTable.Rows)
            {
                RadFormDecorator _newRadFormDecorator = new RadFormDecorator();
                _newRadFormDecorator.ID = "RadFormDecorator" + _row["CtgryID"].ToString();
                _newRadFormDecorator.Skin = _row["CtgryColr"].ToString().Trim();
                _newRadFormDecorator.EnableEmbeddedSkins = false;
                _newRadFormDecorator.DecoratedControls = FormDecoratorDecoratedControls.CheckBoxes;
                _newRadFormDecorator.DecorationZoneID = _row["CtgryColr"].ToString() + "ZoneID" + _row["CtgryID"].ToString();
                RadFormDecoratorsPanel.Controls.Add(_newRadFormDecorator);
            }

    Thats mean, the DecorationZoneID is changed dynamicly and (#cc00ffZoneID1 and #cc00ffZoneID2 and #cc00ffZoneID3 and so on). So I need to add the style which you suggested dynamicly too, in other words, what is the required code which I have to add to the above code in order to add your suggested style to every RadFormDecorator  which is added dynamicly (Note: If I add your suggested style to the aspx page like this:
    <head runat="server">
        <title></title>
        <style type="text/css">
                            /* the styling of radiobuttons and checkboxes in Safari and Chrome is already fully achieved with CSS */
                @media screen and (-webkit-min-device-pixel-ratio: 0)
                {
                    /* checkboxes */
                    #ffff00ZoneID1 input[type="checkbox"],
                    #ffff00ZoneID1 input[type="checkbox"][disabled]:hover
                    {
                        background-image: url('Skins/FormDecorator/ffff00/CheckBox/CheckBoxSprites.gif');
                    }
                }
      
    /* the styling of radiobuttons and checkboxes in Safari and Chrome is already fully achieved with CSS */
                @media screen and (-webkit-min-device-pixel-ratio: 0)
                {
                    /* checkboxes */
                    #ffff00ZoneID2 input[type="checkbox"],
                    #ffff00ZoneID2 input[type="checkbox"][disabled]:hover
                    {
                        background-image: url('Skins/FormDecorator/ffff00/CheckBox/CheckBoxSprites.gif');
                    }
                }
      
      
         </style>
    </head>
    Then it is works fine just for Category ID = 1 AND Category ID = 2, But there could be alot of categories which belongs to the same skin)

    Please, I need your help in order to fix the above issue,
    It is apprecited to send me the modified code.

    Regards,
    Bader

  12. Fiko
    Admin
    Fiko avatar
    1406 posts
    Member since:
    May 2014

    Posted 15 Oct 2010 Link to this post

    Hello Bader,

    You can register CSS classes dynamically using the approaches shown in this and this pages. Alternatively, you can generate am external CSS file and link it using the approach shown in this thread.

    Best wishes,
    Fiko
    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

  13. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 20 Oct 2010 Link to this post

    Hello,

    Thank you for your last reply,
    After viewing the links you sent to me, I saw that they are not related 100% to my issue,
    Please view the following project:<LINK TO PROJECT REMOVED >.
    There are to pages Default.aspx and Default2.aspx.
    Default.aspx shows a static view of the skins, thats mean, Only one checkbox can be displayed using the same skin in the same page at a time.
    Default2.aspx shows how can I dispaly more than one checkbox using the same skin. But here the RadFormDecorator control is dynamicly added using the following code:

    foreach (DataRow _row in CtgryLstDataTable.Rows) 
            
                RadFormDecorator _newRadFormDecorator = new RadFormDecorator(); 
                _newRadFormDecorator.ID = "RadFormDecorator" + _row["CtgryID"].ToString(); 
                _newRadFormDecorator.Skin = _row["CtgryColr"].ToString().Trim(); 
                _newRadFormDecorator.EnableEmbeddedSkins = false; 
                _newRadFormDecorator.DecoratedControls = FormDecoratorDecoratedControls.CheckBoxes; 
                _newRadFormDecorator.DecorationZoneID = _row["CtgryColr"].ToString() + "ZoneID" + _row["CtgryID"].ToString(); 
                RadFormDecoratorsPanel.Controls.Add(_newRadFormDecorator); 
            }

    Thats mean, the DecorationZoneID is changed dynamicly and (#cc00ffZoneID1 and #cc00ffZoneID2 and #cc00ffZoneID3 and so on). So I need to add the style which you suggested dynamicly too, in other words, what is the required code which I have to add to the above code in order to add your suggested style to every RadFormDecorator  which is added dynamicly (Note: If I add your suggested style to the aspx page like this:
    <head runat="server">
        <title></title>
        <style type="text/css">
                            /* the styling of radiobuttons and checkboxes in Safari and Chrome is already fully achieved with CSS */
                @media screen and (-webkit-min-device-pixel-ratio: 0)
                {
                    /* checkboxes */
                    #ffff00ZoneID1 input[type="checkbox"],
                    #ffff00ZoneID1 input[type="checkbox"][disabled]:hover
                    {
                        background-image: url('Skins/FormDecorator/ffff00/CheckBox/CheckBoxSprites.gif');
                    }
                }
      
    /* the styling of radiobuttons and checkboxes in Safari and Chrome is already fully achieved with CSS */
                @media screen and (-webkit-min-device-pixel-ratio: 0)
                {
                    /* checkboxes */
                    #ffff00ZoneID2 input[type="checkbox"],
                    #ffff00ZoneID2 input[type="checkbox"][disabled]:hover
                    {
                        background-image: url('Skins/FormDecorator/ffff00/CheckBox/CheckBoxSprites.gif');
                    }
                }
      
      
         </style>
    </head>
    Then it is works fine just for Category ID = 1 AND Category ID = 2, But there could be alot of categories which belongs to the same skin)

    Please, I need your help in order to fix the above issue,
    It is apprecited to send me the modified code.

    Regards,
    Bader

  14. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7206 posts
    Member since:
    Dec 2014

    Posted 26 Oct 2010 Link to this post

    Hi Bader,

    Please do not post links to projects with Developer versions of RadControls. As for the problem itself, in scenario like yours, you will need to dynamically add the selectors from codebehind as well. For example you could check this approach.

    Greetings,
    Georgi Tunev
    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

  15. Gallaz Philippe
    Gallaz Philippe avatar
    8 posts
    Member since:
    Jul 2009

    Posted 27 Oct 2010 Link to this post

    I Detected the same problem in my project... Could you help me to solve it ?

    I made a post with code here : http://www.telerik.com/community/forums/aspnet-ajax/form-decorator/problem-with-the-display-of-a-checkboxlist-in-safari-chrome.aspx

    Thank you very much.

  16. Gallaz Philippe
    Gallaz Philippe avatar
    8 posts
    Member since:
    Jul 2009

    Posted 29 Oct 2010 Link to this post

    Hello,

    I don't find any solution. This problem is urgent.

    I did a simple usercontrol, it's OK under firefox and ie but it doesn't work on safari ans chrome.

    Here, my .ascx code

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TEST_BOSSearch.ascx.cs" Inherits="UmbracoBOSControls.Controls.TEST_BOSSearch" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
      
         <telerik:RadFormDecorator runat="server" ID="rfdTopSearch" EnableEmbeddedSkins="false" Skin="TopSearch" />
         <asp:CheckBoxList runat="server" ID="cbxListModules" RepeatColumns="1" RepeatDirection="Vertical"></asp:CheckBoxList>

    Here, my css fo FormDecorator :

    /* Decorate <input type="checkbox" /> */
    .RadForm_TopSearch .rfdCheckboxUnchecked,
    .RadForm_TopSearch .rfdInputDisabled.rfdCheckboxUnchecked:hover
    {
        background: transparent url('FormDecorator/CheckBoxSprites.png') no-repeat 0 0;
    }
      
    .RadForm_TopSearch .rfdCheckboxUnchecked:hover
    {
        background: transparent url('FormDecorator/CheckBoxSprites.png') no-repeat 0 -200px;
    }
      
    .RadForm_TopSearch .rfdCheckboxChecked,
    .RadForm_TopSearch .rfdInputDisabled.rfdCheckboxChecked:hover
    {
        background: transparent url('FormDecorator/CheckBoxSprites.png') no-repeat 0 -420px;
    }
      
    .RadForm_TopSearch .rfdCheckboxChecked:hover
    {
        background: transparent url('FormDecorator/CheckBoxSprites.png') no-repeat 0 -640px;
    }
      
    .RadForm_TopSearch label
    {
        color:#FFFFFF;
        font-family:Arial;
        font-size:11px;
        text-indent:6px;
    }

    Tell me if you want other information.

    Regards.

  17. Gallaz Philippe
    Gallaz Philippe avatar
    8 posts
    Member since:
    Jul 2009

    Posted 01 Nov 2010 Link to this post

    Does anyone can help me ? Could you give me a way to resolve this issue ?

  18. Bozhidar
    Admin
    Bozhidar avatar
    647 posts
    Member since:
    Dec 2014

    Posted 01 Nov 2010 Link to this post

    Hello Gallaz Philippe,

    We are using different mechanism for skinning the controls in WebKit browsers, so if you are using a custom skin where there is no WebKit-related CSS present, such problem might occur. If you examine the original external skins, you will notice a WebKit section in the CSS' comments - please make sure that they exist in your custom skin as well.

    If this doesn't help or your case is different, please send us a small sample project (including your custom Sprites and CSS) where this issue could be reproduced and we will check it right away.

    For your convenience I am psoting here here a snippet form the Default Telerik skin, which decorates the Radio Buttons and Checkboxes for Webkit browsers:

    /* the styling of radiobuttons and checkboxes in Safari and Chrome is already fully achieved with CSS */
    @media screen and (-webkit-min-device-pixel-ratio: 0)
    {
        /* checkboxes */
        .rfdCheckbox input[type="checkbox"],
        .rfdCheckbox input[type="checkbox"][disabled]:hover
        {
            background-image: url('<%=WebResource("Telerik.Web.UI.Skins.Default.FormDecorator.CheckBoxSprites.gif")%>');
        }
         
        /* radio buttons */
        .rfdRadio input[type="radio"],
        .rfdRadio input[type="radio"][disabled="disabled"]:hover
        {
            background-image: url('<%=WebResource("Telerik.Web.UI.Skins.Default.FormDecorator.RadioButtonSprites.png")%>');
        }
    }

    You could use the above CSS selectors to apply styling for Safari and Chrome.
    Best wishes,
    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

  19. Gallaz Philippe
    Gallaz Philippe avatar
    8 posts
    Member since:
    Jul 2009

    Posted 01 Nov 2010 Link to this post

    Hello,

    First : Thanks for your response.

    I sent you a ticket ( ID is: 362401 ) with a sample project attached to it. You can reproduce the problem with it.

    Regards.

  20. Karthik
    Karthik avatar
    18 posts
    Member since:
    Aug 2010

    Posted 03 Jul 2012 Link to this post

    Hi Bozhidar,

    I found this issue was fixed. Things were working fine with chrome till version 19.0. But from version 20 its again an issue. The checkbox controls are not styled. Is there any quick fixes for the same?

    Thanks,
    Karthik

  21. Bozhidar
    Admin
    Bozhidar avatar
    647 posts
    Member since:
    Dec 2014

    Posted 04 Jul 2012 Link to this post

    Hello,

    A CSS fix is will be provided in the next official release - Q2, 2012, Service Pack 1, scheduled for the last week of July. Until then, you could use the following fix in your projects:

    <!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">
        .rfdRadio input[type="radio"],
        .rfdCheckbox input[type="checkbox"] {
            -webkit-appearance: none;
        }
        </style>
    </head>
    <body style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px;
        padding-top: 0px;">
        <form id="Telerik" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All"
            EnableRoundedCorners="true" Skin="Office2010Black" />
        <asp:CheckBox ID="chb1" runat="server" Text="Google Chrome" />
        <asp:RadioButton ID="rb1" runat="server" Text="Google Chrome" />
        </form>
    </body>
    </html>


    All the best,
    Bozhidar
    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.

  22. Ray
    Ray avatar
    1 posts
    Member since:
    Apr 2011

    Posted 30 Jul 2012 Link to this post

    Is there any update on this issue? We've updated to the Q2 SP1 release and are seeing the same behavior.  We confirmed that things work correctly in Chrome 19 but not in 20 so I assume we're seeing the same issue.

  23. Bozhidar
    Admin
    Bozhidar avatar
    647 posts
    Member since:
    Dec 2014

    Posted 31 Jul 2012 Link to this post

    Hi,

    I have tested the checkboxes and radiobuttons with the latest official release - Q2, SP1, 2012, and it works as expected - all checkxboxes and radiobuttons are decorated properly. http://screencast.com/t/11MrHJIZ video shows my test with the elements on a single page and of the official demos also. Check if the the cache is cleared and also check it on another machine if the issue is still exist with Chrome 20.

    All the best,
    Bozhidar
    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.

  24. Dilip
    Dilip avatar
    1 posts
    Member since:
    Mar 2014

    Posted 28 Mar Link to this post

    try adding height and width to your controls and of course

        input[type="checkbox"]{
        -webkit-appearance: checkbox;
        }

        input[type="radio"]{

        -webkit-appearance: radio;

        }
       

    for more search on http://techbrush.org 

  25. Bozhidar
    Admin
    Bozhidar avatar
    647 posts
    Member since:
    Dec 2014

    Posted 01 Apr Link to this post

    Hello Dilip,

    I have tested with the code provided form you:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            input[type="checkbox"] {
                -webkit-appearance: checkbox;
            }
     
            input[type="radio"] {
                -webkit-appearance: radio;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server"></asp:ScriptManager>
            <telerik:RadFormDecorator runat="server" DecoratedControls="All" />
            <asp:CheckBox runat="server" Text="Check" />
            <asp:RadioButton runat="server" Text="Radio" />
            <br />
            <br />
            <asp:CheckBox runat="server" Text="Check" Checked="true" />
            <asp:RadioButton runat="server" Text="Radio" Checked="true" />
            <br />
            <br />
            <asp:CheckBox runat="server" Text="Check" Enabled="false" />
            <asp:RadioButton runat="server" Text="Radio" Enabled="false" />
            <br />
            <br />
            <asp:CheckBox runat="server" Text="Check" Enabled="false" Checked="true" />
            <asp:RadioButton runat="server" Text="Radio" Enabled="false" Checked="true" />
        </form>
    </body>
    </html>

    And I don't see any problems in Chrome. Could you be mores specific what is the issue you are experiencing? It will be helpful if you give us more details and screenshot that shows the existing problem.

    Also tried the above code with height/width added and again, they work as expected:

    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            input[type="checkbox"] {
                -webkit-appearance: checkbox;
            }
     
            input[type="radio"] {
                -webkit-appearance: radio;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server"></asp:ScriptManager>
            <telerik:RadFormDecorator runat="server" DecoratedControls="All" />
            <asp:CheckBox runat="server" Text="Check" Height="100" Width="100" />
            <asp:RadioButton runat="server" Text="Radio" Height="100" Width="100" />
            <br />
            <br />
            <asp:CheckBox runat="server" Text="Check" Checked="true" Height="100" Width="100" />
            <asp:RadioButton runat="server" Text="Radio" Checked="true" Height="100" Width="100" />
            <br />
            <br />
            <asp:CheckBox runat="server" Text="Check" Enabled="false" Height="100" Width="100" />
            <asp:RadioButton runat="server" Text="Radio" Enabled="false" Height="100" Width="100" />
            <br />
            <br />
            <asp:CheckBox runat="server" Text="Check" Enabled="false" Checked="true" Height="100" Width="100" />
            <asp:RadioButton runat="server" Text="Radio" Enabled="false" Checked="true" Height="100" Width="100" />
        </form>
    </body>
    </html>


    Regards,
    Bozhidar
    Telerik
     
    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.

  26. Mike
    Mike avatar
    1 posts
    Member since:
    Sep 2014

    Posted 17 Sep Link to this post

    I had the  same issue and was able to fix it with the following code inside of a <style> tag (not best practice .. but you get the idea). I had my input in a table, so other display types may work too. I'm not sure. I have not tested them all.

    #your_id input[type=checkbox]
    {
      display: inline-table;
    }

    Mike

Back to Top