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

Checkbox Controls Appearing as Labels

2 Answers 249 Views

FormDecorator

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

Nathan asked on 17 Oct 2011, 10:47 PM

Hello,

I'm using the FormDecorator control which really makes everything look very nice, but I have a few controls that are not appearing correctly. I've created a custom skin by following the instructions (link below). The only problem I'm experiencing is with the ASP Checkbox and regular HTML button. I set the HTML button class to "rfdDecorated" and it looks fine, but all of my checkbox controls now appear as regular labels. The HTML button originally looked like a hyperlink until I set the class. Any suggestions??

One more thing, I have the custom skin files in my "Themes" folder. The custom skin files include a "FormDecorator" folder that includes the images such as the sprites, and the main CSS file for FormDecorator. I have made no custom changes to these files.

http://www.telerik.com/help/aspnet-ajax/radformdecorator-creating-custom-skins.html

Thanks,
Nathan

2 Answers, 1 is accepted

answered on 18 Oct 2011, 07:50 AM

Hi Nathan,

In order to work correctly and to apply fancy CSS and look and feel, RadForm Decorator hides the real HTML inputs and replaces them with a different HTML elements, that could be styled nicely.

Normal HTML button like this:

<input type="button" value="Decorated Button" />

will be rendered with the following HTML:

<a href="javascript:void(0)" class="rfdSkinnedButton">

<input type="button" value="Decorated Button" class="rfdDecorated" tabindex="-1">

</a>

We need to wrap the input into an anchor in order to be able to have rounded corners. The anchor elements has the right rounded corner, while the input elements has the other part of the button.

Note that if you apply any CSS class of the input, it will prevent the decoration:

<input type="button" value="Not Decorated Button" class="myClass" />

Will be rendered:

<input type="button" class="myClass" value="Not Decorated Button">

Checkbox elements cloud not be styled fully with CSS (except in webkit browsers), that`s why, we hide the HTML element and replace it with label, whcih looks like a checkbox or radio button. The behavior is the same and the user will not be confused in any way.

So, checkbox like that one:

<input type="checkbox" checked="checked" /> Decorated Checkbox Checked

<input id="rfd113189198069282" class="rfdRealInput" type="checkbox" checked="checked" _rfddecoratedid="_rfdSkinnedrfd113189198069282">

<label id="_rfdSkinnedrfd113189198069282" class=" rfdCheckboxChecked" for="rfd113189198069282" unselectable="on"> </label>

Decorated Checoxkbox Checked

Where real checkbox, marked in yellow, was hidden and rendered is a decorated checkbox.

If you have further questions, you should provide us a sample code or sample project with your custom skin and screenshots showing the issues you are experiencing.

Bellow is a sample code with a few buttons and checkboxes:

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

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

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadFormDecorator ID="rfd1" runat="server" DecoratedControls="All" />

<input type="button" value="Decorated Button" />

<br />

<input type="button" value="Not Decorated Button" class="myClass" />

<br />

<input type="checkbox" checked="checked" /> Decorated Checkbox Checked

<br />

<input type="checkbox" /> Decorated Checkbox UnChecked

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