This is a migrated thread and some comments may be shown as answers.

Rtl rendering problem

1 Answer 71 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Ali Rad
Top achievements
Rank 1
Ali Rad asked on 04 Oct 2009, 06:22 AM
Hi,
I'm using the latest official version of ASP.NET Ajax  and I use IE8.0.
Please check the following demo :
http://demos.telerik.com/aspnet-ajax/toolbar/examples/functionality/righttoleft/defaultcs.aspx
as you see the controls (RadToolBarDropDown and RadToolBarSplitButton ) has been used to demonstrate the right to left functionality, but they don't render properly.
just change your demo and move the RadToolBarDropDown or RadToolBarSplitButton from the last to the beginning of toolbar and instead of short names like  Left,center,Right or Red Blue,Green use longer names.
the if you click on them, you will see that some portion of items the items truncated on the screen.

if you compare it with http://demos.telerik.com/aspnet-ajax/toolbar/examples/functionality/itemtypes/defaultcs.aspx you will find that the starting point of popup menu is wrong, means for this one when you click on RadToolBarDropDown or RadToolBarSplitButton the popup menu starts from left to right ( it aligned from the text portion toward down arrow image which is right) .
For http://demos.telerik.com/aspnet-ajax/toolbar/examples/functionality/righttoleft/defaultcs.aspx example we expect the right behavior ( It should be aligned from the text portion toward the down arrow image)  bu as you can see the popup menu always render from left to right ( from down arrow image toward text portion )

Thanks





1 Answer, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 08 Oct 2009, 08:43 AM
Hello Ali,

This is a bug which we've already logged in our bug-tracking system. For now please use the following work-around:

1. subscribe to OnClientDropDownOpened event of RadToolBar:

<telerik:RadToolBar ID="RadToolBar1" runat="server" dir="rtl" OnClientDropDownOpened="dropDownOpened" > 

2. add the javascript event handler to your page:

<script type="text/javascript"
 
    function dropDownOpened(sender, args) { 
   
        var dropDown = args.get_item()._animationContainer; 
        var btnElem = args.get_item().get_element(); 
 
        var leftPos = (dropDown.offsetLeft + btnElem.clientWidth) - dropDown.clientWidth; 
        dropDown.style.left = leftPos + "px"
    } 
</script> 


Greetings,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Tags
ToolBar
Asked by
Ali Rad
Top achievements
Rank 1
Answers by
Yana
Telerik team
Share this question
or