Inconsistent Rad Control Button being displayed

3 posts, 1 answers
  1. Navnit
    Navnit avatar
    19 posts
    Member since:
    Jan 2011

    Posted 23 Aug 2011 Link to this post

    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. Answer
    Slav
    Admin
    Slav avatar
    1356 posts

    Posted 26 Aug 2011 Link to this post

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

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Navnit
    Navnit avatar
    19 posts
    Member since:
    Jan 2011

    Posted 26 Aug 2011 Link to this post

    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
Back to Top