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

misplaced background in classic render mode

2 Answers 89 Views

Button

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

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

<html xmlns="http://www.w3.org/1999/xhtml">

<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

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.