Checkbox Controls Appearing as Labels

3 posts, 0 answers
  1. Nathan
    Nathan avatar
    52 posts
    Member since:
    Apr 2011

    Posted 17 Oct 2011 Link to this post

    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.
  3. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 18 Oct 2011 Link to this post

    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">
    <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.
  5. Nathan
    Nathan avatar
    52 posts
    Member since:
    Apr 2011

    Posted 18 Oct 2011 Link to this post

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

Back to Top