RadButton CheckBox on right

2 posts, 0 answers
  1. Kevin
    Kevin avatar
    26 posts
    Member since:
    Mar 2012

    Posted 16 Mar 2012 Link to this post

    What's the most straightforward way to make a RadButton CheckBox show its checkbox to the right of the text instead of to the left?  I see a few examples that use right-to-left and setting of toggle states, but these all seem way too complicated for such a simple thing.
  2. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 19 Mar 2012 Link to this post

    Hi,

    Putting checkbox on the right of the text is a tight to left option related to the UI requirements and guidelines. The only way to put the checkbox on the right is to use a CSS class that will make the Button to behave in tight to left mode:

    <head runat="server">
        <title></title>
        <style type="text/css">
            .checkRtl
            {
                direction: rtl;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadButton ID="chkInactive" runat="server" CssClass="checkRtl" ButtonType="ToggleButton"
            Text="Inactive" ToggleType="CheckBox" />
        <br />
        <br />
        <span class="checkRtl">
            <telerik:RadButton ID="RadButton1" runat="server" ButtonType="ToggleButton" Text="Inactive"
                ToggleType="CheckBox" />
        </span>
        </form>
    </body>
    </html>

    Another option not to use right to left support is to use again CS class to override through it a few base CSS styles:

    <!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">
            .checkRtl.rbToggleButton
            {
                padding-left: 0;
                padding-right: 23px;
            }
            .checkRtl .rbPrimaryIcon
            {
                right: 4px;
                left: auto;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadButton ID="chkInactive" runat="server" CssClass="checkRtl" ButtonType="ToggleButton"
            Text="Inactive" ToggleType="CheckBox" />
        </form>
    </body>
    </html>


    Regards,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top