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
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
0
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:
will be rendered with the following HTML:
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:
Will be rendered:
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:
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:
All the best,
Bozhidar
the Telerik team
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 CheckedWhere 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.
0
Nathan
Top achievements
Rank 2
Rank 2
answered on 18 Oct 2011, 05:00 PM
Got it! Since I didnt' see it being changed as you explained, I created a test page with your example and was able to determine the issue. The problem was that I was using the attribute EnableEmbeddedSkins="false" in my FormDecorator which was placed in a Master Page.
When I removed this, my controls appeared as expected.
Thanks for you help!!