Dropdown sub buttons rtl problem

[Roy]

Hello,

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...>
<items>
<telerik:RadToolBarDropDown text="short">
<Buttons>
<telerik:RadToolBarButton text="very long text" />
</Buttons>
</telerik:RadToolBarDropDown>
</items>
</telerik:RadToolBar>

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?

[Yana]

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";

        }
    </script>

All the best,
Yana
the Telerik team

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