Dropdown sub buttons rtl problem

2 posts, 1 answers
  1. Roy
    Roy avatar
    36 posts
    Member since:
    Jun 2008

    Posted 11 Nov 2008 Link to this post


    i'm trying to incorporate a rtl toolbar into my web app.
    i've incountered the following problem:

    Let's assume i have a rtl toolbar, where the first item is a drop down item. Basically, it'll go something like this:
    <telerik:RadToolBar div="rtl" runat...>
    <telerik:RadToolBarDropDown text="short">
    <telerik:RadToolBarButton text="very long text" />

    now, problems is that the sub menu which opened from the drop down button is aligned to the left of the drop down button himself, as inherited from the left to right layout.
    But, when the toolbar is rtl, the alignement should be to the right.
    What does it metter? in the example above, the submenu's text is much longer than the parent dropdown's text. Thus the submenu is opened into the right of the browser, creating a horizontal scrollbar, which you can't use to scroll right to view the submenu's full text, because once you click on it, the sub menu disappear.

    I tried to see if that's a known issue, but couldn't find it..
    Any suggestions?
  2. Answer
    Yana avatar
    4604 posts

    Posted 11 Nov 2008 Link to this post

    Hello Roy,

    I suggest you subscribe to OnClientDropDownOpened event and set the position of the dropdown in its handler like this:

     <script type="text/javascript">  
            function dropDownOpened(sender, args)  
                var rtbSlide =  args.get_item().get_dropDownElement().parentNode;  
                var itemWidth = args.get_item().get_element().offsetWidth;  
                var dropDownWidth = rtbSlide.offsetWidth;  
                if(dropDownWidth > itemWidth)  
                    rtbSlide.style.left = rtbSlide.offsetLeft - (dropDownWidth - itemWidth) + "px";  

    All the best,
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top