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

misplaced background in classic render mode

2 Answers 68 Views
Button
This is a migrated thread and some comments may be shown as answers.
Dave
Top achievements
Rank 1
Dave asked on 10 Jul 2017, 11:32 PM

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 Answers, 1 is accepted

Sort by
0
Dave
Top achievements
Rank 1
answered on 10 Jul 2017, 11:34 PM
static2.gif attached needed in the above code's CSS
0
Rumen
Telerik team
answered on 13 Jul 2017, 02:25 PM

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.
Tags
Button
Asked by
Dave
Top achievements
Rank 1
Answers by
Dave
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or