Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > FormDecorator > radio buttons and checkboxes are not visible on Chrome and Safari

• Frank Jamae

  Posted on Feb 23, 2010 (permalink)

  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.

  Reply

• Georgi Tunev Georgi Tunev

  Posted on Feb 24, 2010 (permalink)

  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.

  Attached files

  • radformdecorator.png

  Reply



• Frank Jamae

  Posted on Feb 24, 2010 (permalink)

  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

  Reply

• Georgi Tunev Georgi Tunev

  Posted on Feb 25, 2010 (permalink)

  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.

  Reply

• Fit2Page Master

  Posted on Mar 29, 2010 (permalink)

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

  Reply

• Georgi Tunev Georgi Tunev

  Posted on Apr 1, 2010 (permalink)

  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.

  Reply

• Bader Master

  Posted on Oct 2, 2010 (permalink)

  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

  Attached files

  • checkboxes.JPG

  Reply

• Georgi Tunev Georgi Tunev

  Posted on Oct 4, 2010 (permalink)

  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

  Reply

• Bader Master

  Posted on Oct 7, 2010 (permalink)

  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 

  Reply

• Georgi Tunev Georgi Tunev

  Posted on Oct 8, 2010 (permalink)

  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

  Reply

• Bader Master

  Posted on Oct 8, 2010 (permalink)

  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

  Reply

• Fiko Fiko

  Posted on Oct 15, 2010 (permalink)

  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

  Reply

• Bader Master

  Posted on Oct 20, 2010 (permalink)

  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
  

  Reply

• Georgi Tunev Georgi Tunev

  Posted on Oct 26, 2010 (permalink)

  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

  Reply

• Gallaz Philippe

  Posted on Oct 27, 2010 (permalink)

  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.

  Reply

• Gallaz Philippe

  Posted on Oct 29, 2010 (permalink)

  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.
  

  Reply

• Gallaz Philippe

  Posted on Nov 1, 2010 (permalink)

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

  Reply

• Bozhidar Bozhidar

  Posted on Nov 1, 2010 (permalink)

  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

  Reply

• Gallaz Philippe

  Posted on Nov 1, 2010 (permalink)

  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.

  Reply

• Karthik

  Posted on Jul 3, 2012 (permalink)

  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
  

  Reply

• Bozhidar Bozhidar

  Posted on Jul 4, 2012 (permalink)

  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.

  Reply

• Ray

  Posted on Jul 30, 2012 (permalink)

  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.

  Reply

• Bozhidar Bozhidar

  Posted on Jul 31, 2012 (permalink)

  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.

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > FormDecorator > radio buttons and checkboxes are not visible on Chrome and Safari