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

Inconsistent Rad Control Button being displayed

2 Answers 117 Views

Button

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

Navnit asked on 23 Aug 2011, 05:01 PM

Filters.jpg

Hi Telerik Team,

I am currently using a telerik:RadButton and encountering some cross-browser issues with Chrome. Please see the screenshot for a better view of the problem.

I've also provided a code snippet of the solution :

<%--Component--%>

<td style="width: 192px;">

<table cellpadding="0" cellspacing="0" width="100%">

<tr>

<td>

<telerik:RadButton ID="chkBoxComponent" runat="server" ToggleType="CheckBox" ButtonType="StandardButton"

SkinID="filterCheckBox" AutoPostBack="false">

<ToggleStates>

<telerik:RadButtonToggleState Text="Exclude Components Filter" PrimaryIconCssClass="rbToggleCheckboxChecked" />

<telerik:RadButtonToggleState Text="Include Components Filter" PrimaryIconCssClass="rbToggleCheckbox" />

</ToggleStates>

</telerik:RadButton>

</td>

</tr>

<tr>

<td>

<asp:ListBox ID="listBoxComponent" SkinID="listboxFilter" runat="server"></asp:ListBox>

</td>

</tr>

</table>

</td>

I have also debugged it by using Chrome's Inspect Element feature and found that the following css class is causing the issue. The problem is that if I make any alterations to it, other rad controls will not display properly as I believe it's a key class to all the Rad Controls.

.rbSkinnedButton {

padding-right: 2px;

}

Any suggestions?
Thanks

Regards,
Navnit

2 Answers, 1 is accepted

Accepted

answered on 26 Aug 2011, 01:37 PM

Hi Navnit,

The examined effect is caused by the internal CSS of the RadButton. It will be brought to the attention of our developers and the problem will be resolved, although I am not able to provide a firm estimate when the fix will be available

Nevertheless, for the time being I can suggest the following workaround. Just place this code into your page, in order to override the default CSS class rbSkinnedButton:

<style type="text/css">

@media screen and (-webkit-min-device-pixel-ratio:0)

{

a.rbSkinnedButton

{

padding-right: 4px;

}

</style>

I hope the provided solution meets your requirements.

Regards,
Slav
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>