Rtl rendering problem

2 posts, 0 answers
  1. Ali Rad
    Ali Rad avatar
    3 posts
    Member since:
    Sep 2009

    Posted 04 Oct 2009 Link to this post

    I'm using the latest official version of ASP.NET Ajax  and I use IE8.0.
    Please check the following demo :
    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 )


  2. Yana
    Yana avatar
    4604 posts

    Posted 08 Oct 2009 Link to this post

    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"

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