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

Dropdown sub buttons rtl problem

1 Answer 59 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Roy
Top achievements
Rank 1
Roy asked on 11 Nov 2008, 12:41 PM
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?

1 Answer, 1 is accepted

Sort by
0
Accepted
Yana
Telerik team
answered on 11 Nov 2008, 02:22 PM
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.
Tags
ToolBar
Asked by
Roy
Top achievements
Rank 1
Answers by
Yana
Telerik team
Share this question
or