This is a migrated thread and some comments may be shown as answers.
RadButton CheckBox on right
3 Answers 80 Views
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 16 Mar 2012, 04:42 PM
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.

3 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 19 Mar 2012, 08:44 AM
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.
0
Matt
Top achievements
Rank 1
answered on 13 Aug 2019, 02:16 PM
Just a FYI for anyone else reading this. I just tried both of these attempts and neither worked. The OP is right, way too complicated.
0
Attila Antal
Telerik team
answered on 16 Aug 2019, 08:26 AM

Hi Matt,

I have just tried it myself with a later version (2019.2.514) of Telerik control and Bozhidar's suggestion works in all major browsers. Here is a short video demonstrating this: RadButton CheckBox On Right

If using Internet Explorer, I suggest double checking its configuration and ensure that it complies with the supported settings: Different appearance or behavior in Internet Explorer on local and production servers

If the issue still persist, I advise you submit a formal support ticket and attach an isolated version of this issue and my we'll investigate it locally. Later after we have the solution, we can share it in this forum post as well to make it available to everyone.

Kind regards, Attila Antal
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Asked by
Kevin
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Matt
Top achievements
Rank 1
Attila Antal
Telerik team
Share this question
or