misplaced background in classic render mode

3 posts, 0 answers
  1. Dave
    Dave avatar
    24 posts
    Member since:
    Jul 2012

    Posted 10 Jul 2017 Link to this post


    Version 2017.2.503 says this is fixed:  RadButton as Checkbox/Radio checked backgrounds are misplaced in Classic RenderMode.

    I'm using 2017.2.621, and it appears it is broken.?

    Here's the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <style type="text/css">
            /* Button Normal */
            .rdDisabled .btnNormal
                width: 70px;
                height: 23px;
                margin: 0; /*7px 5px 0 0;*/
                display: block;
                background: url("static2.gif") no-repeat scroll -42px 0 #eeeeee ! important;
            /* Button Mouseover */
            .rdDisabled .btnHovered
                background-position: -42px -25px ! important;
            .btnNormal .rbText
                color: #333333;
                margin: 4px 0 0 ! important;
                font-family: Verdana, Arial, Segoe UI, Sans-Serif ! important;
                font-weight: normal ! important;
                font-size: 11px ! important;
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <table class="tblLookup" cellspacing="0" cellpadding="0">
                        <telerik:RadRadioButtonList ID="rblLookupBy" runat="server" RenderMode="Classic"
                                <telerik:ButtonListItem Text="Option 1" />
                                <telerik:ButtonListItem Text="Option 2" Selected="true" />
                                <telerik:ButtonListItem Text="Option 3" />
                        <telerik:RadButton ID="btnLookUp" runat="server" Text="Lookup"


    If I add a RenderMode="Lightweight" or "Auto", etc. Then the radio button list aligns properly, but this causes the RadButton which has enabled images to not display properly.  Can you confirm the fix from 2017.2.503 is actually in 2017.2.621, or what else may be wrong.




  2. Dave
    Dave avatar
    24 posts
    Member since:
    Jul 2012

    Posted 10 Jul 2017 in reply to Dave Link to this post

    static2.gif attached needed in the above code's CSS
  3. Rumen
    Rumen avatar
    13469 posts

    Posted 13 Jul 2017 Link to this post

    Hello Dave,

    RadRadioButtonList is released after the discontinuation of the Classic rendering and it supports only lightweight rendering, which means that if there is a classic RadButton and a lightweight RadRadioButtonList on the page their stylesheets will mess each other.

    My advice is to set both button types to Lightweight render mode and rewrite your CSS to work for the lightweight rendering of RadButton. You can see how create lightweight image button at https://demos.telerik.com/aspnet-ajax/button/examples/imagebutton/defaultcs.aspx and https://demos.telerik.com/aspnet-ajax/imagebutton/overview/defaultcs.aspx.

    Best regards,

    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top