Inconsistent Rad Control Button being displayed

[Navnit]

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

[Slav]

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

[Navnit]

Hi Slav,

Thanks for the effort in providing the quick fix. It actually did the trick, but still leaving a 1PX gap between the list-box and the RadButton (padding-bottom). The right padding margin is solved! Nevertheless, I'm quite happy with how it is right now.

Already voted for you guys in the survey.

Cheers!
Navnit