radio buttons and checkboxes are not visible on Chrome and Safari

[Frank Jamae]

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.

[Georgi Tunev]

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.

[Frank Jamae]

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

[Georgi Tunev]

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.

[Fit2Page]

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

BR,
Marc

[Georgi Tunev]

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.

[Bader]

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

[Georgi Tunev]

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

[Bader]

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 

[Georgi Tunev]

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

[Bader]

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

[Fiko]

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

[Bader]

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

[Georgi Tunev]

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

[Gallaz Philippe]

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.

[Gallaz Philippe]

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.

[Gallaz Philippe]

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

[Bozhidar]

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

[Gallaz Philippe]

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.

[Karthik]

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

[Bozhidar]

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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

[Ray]

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.

[Bozhidar]

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

[Dilip]

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 

[Bozhidar]

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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:

<html xmlns="http://www.w3.org/1999/xhtml">
<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

 

[Mike]

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