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

Tabs scroll behind scroll buttons

2 Answers 76 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Tony
Top achievements
Rank 1
Tony asked on 23 May 2008, 02:20 PM
When tabs fill up a tabstrip and the scroll buttons appear, when scrolling, the tabs scroll under the scroll buttons.  Is there an easy way to get the tabs to scroll at the edge of the scroll buttons and not under them?

2 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 26 May 2008, 03:04 PM
Hello Tony,

Unfortunately there is no way to achieve that effect. At the time being tabs scroll under the scroll buttons.
This however is achievable using some JavaScript code which will reposition the scroll:

            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Width="300px" ScrollChildren="true" 
                Skin="Outlook" SelectedIndex="0" OnClientLoad="repositionSrollArrows"
                <Tabs> 
                    <telerik:RadTab Text="Advanced"
                    </telerik:RadTab> 
                    <telerik:RadTab Text="Automatic Updates"
                    </telerik:RadTab> 
                    <telerik:RadTab Text="Remote"
                    </telerik:RadTab> 
                    <telerik:RadTab Text="General"
                    </telerik:RadTab> 
                    <telerik:RadTab Text="Computer Name"
                    </telerik:RadTab> 
                    <telerik:RadTab Text="Hardware"
                    </telerik:RadTab> 
                    <telerik:RadTab Text="System Restore"
                    </telerik:RadTab> 
                </Tabs> 
            </telerik:RadTabStrip> 
            <script type="text/javascript"
                function repositionSrollArrows (sender) 
                { 
                    var arrows = $telerik.getChildrenByTagName(sender.get_levelElement(), "a"); 
                    sender.get_element().appendChild(arrows[0]); 
                    sender.get_element().appendChild(arrows[1]); 
                    arrows[0].style.position = "static"
                    arrows[0].style.marginTop = "-18px"
                    arrows[1].style.marginTop = "-18px"
                    arrows[1].style.position = "static"
                    sender.get_levelElement().style.width = sender.get_levelElement().offsetWidth - arrows[0].offsetWidth * 2 + "px"; 
                } 
            </script> 


Regards,
Albert
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Tahami
Top achievements
Rank 1
answered on 12 Dec 2008, 06:56 AM
Great scripting skills. I also resolved the problem using this :-)
Tags
TabStrip
Asked by
Tony
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Tahami
Top achievements
Rank 1
Share this question
or