Hello,
I have a problem with RadFormDecorator control.
Here is my code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> <!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>Test Page</title> <link rel="stylesheet" type="text/css" href="Skins/FormDecorator/00ccff/FormDecorator.00ccff.css" /> <link rel="stylesheet" type="text/css" href="Skins/FormDecorator/00ff00/FormDecorator.00ff00.css" /> </head> <body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" Skin="00ccff" EnableEmbeddedSkins="false" DecoratedControls="CheckBoxes" DecorationZoneID="00ccffZoneID1" /> <telerik:RadFormDecorator runat="server" ID="RadFormDecorator2" Skin="00ff00" EnableEmbeddedSkins="false" DecoratedControls="CheckBoxes" DecorationZoneID="00ff00ZoneID1" /> <span id="00ccffZoneID1" > <asp:CheckBox ID="CheckBox1" runat="server" /> </span> <span id="00ff00ZoneID1"> <asp:CheckBox ID="CheckBox2" runat="server" /> </span> </form> </body> </html>By running the above code using Chrome or Safari then I get the result which is shown in the attached image 1.jpg, and by running the above code using other browsers, I get the result which is shown in 2.jpg.
Here is FormDecorator.00ccff.css:
/* RadFormDecorator for ASP.NET 00ccff Skin */ /* CSS class for styling the decoration zone or the <html /> tag of the page */ .RadForm_00ccff.rfdZone { background-color: Green; color:#00ccff; } /* Decorate <input type="checkbox" /> */ .RadForm_00ccff .rfdCheckboxUnchecked, .RadForm_00ccff .rfdInputDisabled.rfdCheckboxUnchecked:hover { background: transparent url('CheckBox/CheckBoxSprites.gif') no-repeat 0 0; } .RadForm_00ccff .rfdCheckboxUnchecked:hover { background: transparent url('CheckBox/CheckBoxSprites.gif') no-repeat 0 -200px; } .RadForm_00ccff .rfdCheckboxChecked, .RadForm_00ccff .rfdInputDisabled.rfdCheckboxChecked:hover { background: transparent url('CheckBox/CheckBoxSprites.gif') no-repeat 0 -420px; } .RadForm_00ccff .rfdCheckboxChecked:hover { background: transparent url('CheckBox/CheckBoxSprites.gif') no-repeat 0 -640px; } /* 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('CheckBox/CheckBoxSprites.gif'); } } @media screen and (-webkit-min-device-pixel-ratio: 0) { /* checkboxes */ #cc00ffZoneID1 input[type="checkbox"], #cc00ffZoneID1 input[type="checkbox"][disabled]:hover { background-image: url('CheckBox/CheckBoxSprites.gif'); } } And FormDecorator.00ff00.css:
/* RadFormDecorator for ASP.NET 00ff00 Skin */ /* CSS class for styling the decoration zone or the <html /> tag of the page */ .RadForm_00ff00.rfdZone { background-color: Green; color:#00ff00; } /* Decorate <input type="checkbox" /> */ .RadForm_00ff00 .rfdCheckboxUnchecked, .RadForm_00ff00 .rfdInputDisabled.rfdCheckboxUnchecked:hover { background: transparent url('CheckBox/CheckBoxSprites.gif') no-repeat 0 0; } .RadForm_00ff00 .rfdCheckboxUnchecked:hover { background: transparent url('CheckBox/CheckBoxSprites.gif') no-repeat 0 -200px; } .RadForm_00ff00 .rfdCheckboxChecked, .RadForm_00ff00 .rfdInputDisabled.rfdCheckboxChecked:hover { background: transparent url('CheckBox/CheckBoxSprites.gif') no-repeat 0 -420px; } .RadForm_00ff00 .rfdCheckboxChecked:hover { background: transparent url('CheckBox/CheckBoxSprites.gif') no-repeat 0 -640px; } /* 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('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 */ #00ff00ZoneID1 input[type="checkbox"], #00ff00ZoneID1 input[type="checkbox"][disabled]:hover { background-image: url('CheckBox/CheckBoxSprites.gif'); } }Please, I need your help,
It is appreciated to send me the modified code.
Regards,
Bader
1 Answer, 1 is accepted
0
Hi Bader,
I see 2 problems. First, there is a typo in the CSS - your SPAN's ID is 00ccffZoneID1 while the selector in the CSS is named cc00ffZoneID1.
The second and bigger problem is that you are using IDs that start with a digit - they should start with a letter. I prepared a small sample that uses your code, where I changed the IDs (Added "X" in front) and fixed the typo and now the code is working as expected.
I would strongly recommend however, not to use IDs like the one that you currently use. Using hex strings for IDs is more likely to cause typos (like the one in your current code) and they make the debugging of the problem much harder.
Best wishes,
Georgi Tunev
the Telerik team
I see 2 problems. First, there is a typo in the CSS - your SPAN's ID is 00ccffZoneID1 while the selector in the CSS is named cc00ffZoneID1.
The second and bigger problem is that you are using IDs that start with a digit - they should start with a letter. I prepared a small sample that uses your code, where I changed the IDs (Added "X" in front) and fixed the typo and now the code is working as expected.
I would strongly recommend however, not to use IDs like the one that you currently use. Using hex strings for IDs is more likely to cause typos (like the one in your current code) and they make the debugging of the problem much harder.
Best wishes,
Georgi Tunev
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.