This is a migrated thread and some comments may be shown as answers.

radio buttons and checkboxes are not visible on Chrome and Safari

25 Answers 1567 Views

FormDecorator

This is a migrated thread and some comments may be shown as answers.

Frank Jamae asked on 23 Feb 2010, 04:59 PM

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.

25 Answers, 1 is accepted

answered on 24 Feb 2010, 08:59 AM

radformdecorator.png

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.

answered on 24 Feb 2010, 05:05 PM

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

answered on 01 Apr 2010, 11:07 AM

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

answered on 02 Oct 2010, 11:07 PM

checkboxes.JPG

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

answered on 08 Oct 2010, 01:31 PM

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

answered on 08 Oct 2010, 11:10 PM

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

answered on 21 Oct 2010, 12:47 AM

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);

}

<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>

answered on 29 Oct 2010, 04:16 PM

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.

answered on 01 Nov 2010, 11:21 AM

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

answered on 04 Jul 2012, 06:45 AM

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

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.

answered on 01 Apr 2014, 07:46 AM

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 />

<asp:CheckBox runat="server" Text="Check" Checked="true" />

<asp:RadioButton runat="server" Text="Radio" Checked="true" />

<br />

<asp:CheckBox runat="server" Text="Check" Enabled="false" />

<asp:RadioButton runat="server" Text="Radio" Enabled="false" />

<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 />

<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 />

<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 />

<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.