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

Tabs scroll behind scroll buttons

2 Answers 103 Views

TabStrip

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

2 Answers, 1 is accepted

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