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

    Hi,

    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">
        <title></title>
        <style type="text/css">
            /* Button Normal */
            .btnNormal,
            .rdDisabled .btnNormal
            {
                width: 70px;
                height: 23px;
                margin: 0; /*7px 5px 0 0;*/
                display: block;
                float:right;
                background: url("static2.gif") no-repeat scroll -42px 0 #eeeeee ! important;
            }
     
            /* Button Mouseover */
            .btnHovered,
            .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;
            }
     
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
     
            <table class="tblLookup" cellspacing="0" cellpadding="0">
                <tr>
                    <td>
                        <telerik:RadRadioButtonList ID="rblLookupBy" runat="server" RenderMode="Classic"
                            AutoPostBack="false"
                        >
                            <Items>
                                <telerik:ButtonListItem Text="Option 1" />
                                <telerik:ButtonListItem Text="Option 2" Selected="true" />
                                <telerik:ButtonListItem Text="Option 3" />
                            </Items>
                        </telerik:RadRadioButtonList>
                    </td>
                </tr>
                <tr>
                    <td>
                        <telerik:RadButton ID="btnLookUp" runat="server" Text="Lookup"
                            Image-EnableImageButton="true"
                            Image-IsBackgroundImage="true"
                            CssClass="btnNormal"
                            HoveredCssClass="btnHovered"
                            AutoPostBack="false"
                        />
                    </td>
                </tr>
            </table>
        </form>
    </body>
    </html>

     

    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.

    Thanks,

    Dave

     

  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
    Admin
    Rumen avatar
    13305 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,

    Rumen
    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