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
0
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:
Another option not to use right to left support is to use again CS class to override through it a few base CSS styles:
Regards,
Bozhidar
the Telerik team
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:
<html xmlns="http://www.w3.org/1999/xhtml"><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"><html xmlns="http://www.w3.org/1999/xhtml"><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
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
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.