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

2009 Q1 Tabstrip - Bug in Multiline

8 Answers 171 Views

TabStrip

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

Steve Y asked on 14 Mar 2009, 03:45 PM

I just upgraded to 2009Q1. I want to briefly mention that I really do not like the 'new and improved' skins. I find them flat, bulky looking, lacking contrast, and uninteresting. However, I'll post more about this in the general category.

However, this post is about a bug I'm seeing with multiline. I have a tabstrip in a div of width 400px. I have a small number of tabs and then an 'isBreak' and a final tab which appears on the second row. Behind tab number 1, you can see the four arrows normally used for scrolling tabs. If the tab is highlighted, you can see the arrows behind the highlighted tab. If you select another tab (i.e. tab 2) then the four scroll arrows are clearly visible. I've seen this in Office2007 and Outlook skins. I have not checked out any of the others.

Here's the simple aspx to replicate.

    
            <div style="width:400px"> 
        
                        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Width="100%"> 
        
                            <Tabs> 
        
                                <telerik:RadTab runat="server" Text="Address" Selected="true"/> 
        
                                <telerik:RadTab runat="server" Text="Details" /> 
        
                                <telerik:RadTab runat="server" Text="Tax" /> 
        
                                <telerik:RadTab runat="server" Text="Insurance" /> 
        
                                <Telerik:RadTab runat="server" IsBreak="true" /> 
        
                                <telerik:RadTab runat="server" Text="HOA" /> 
        
                            </Tabs> 
        
                        </telerik:RadTabStrip> 
        
                    </div>

Regards, Steve

8 Answers, 1 is accepted

answered on 16 Mar 2009, 09:54 AM

tabstrip-background.png

Hello Steve Y,

Thanks for reporting this bug. It will be fixed in the next SP. Meanwhile, you can use the following CSS style and attached image as a workaround.

    
            <style type="text/css">  
        
                div.RadTabStripTop_Office2007 .rtsLevel1  
        
                {  
        
                    background-image: url(tabstrip-background.png);  
        
                }  
        
                </style>

BTW, you should not add additional tab for a break. You will have to set the IsBreak property to your Insurance tabs. Here's the correct code snippet.

    
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title></title>  
        
                <style type="text/css">  
        
                    div.RadTabStripTop_Office2007 .rtsLevel1  
        
                    {  
        
                        background-image: url(tabstrip-background.png);  
        
                    }  
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                </telerik:RadScriptManager> 
        
                <div style="width: 400px">  
        
                    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Width="100%" Skin="Office2007">  
        
                        <Tabs> 
        
                            <telerik:RadTab runat="server" Text="Address" Selected="true" /> 
        
                            <telerik:RadTab runat="server" Text="Details" /> 
        
                            <telerik:RadTab runat="server" Text="Tax" /> 
        
                            <telerik:RadTab runat="server" Text="Insurance" IsBreak="true" /> 
        
                            <telerik:RadTab runat="server" Text="HOA" /> 
        
                        </Tabs> 
        
                    </telerik:RadTabStrip> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

All the best,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 19 Mar 2009, 04:32 PM

I am having a similar problem, but it is worse when I turn the ShowBaseLine="true". Below is my example, built upon the prior examples.

This example shows a repeating image of arrow buttons. I have duplicated it in office2007 and Vista, but have not tested all the skins. I was using IE7

    
            <div style="width: 100%">  
        
                    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Width="100%" Skin="Vista" ShowBaseLine="true">  
        
                        <Tabs> 
        
                            <telerik:RadTab runat="server" Text="Address" Selected="true" /> 
        
                            <telerik:RadTab runat="server" Text="Details" /> 
        
                            <telerik:RadTab runat="server" Text="Tax" /> 
        
                            <telerik:RadTab runat="server" Text="Insurance" IsBreak="true" /> 
        
                            <telerik:RadTab runat="server" Text="RIO" /> 
        
                            <telerik:RadTab runat="server" Text="HOA" /> 
        
                        </Tabs> 
        
                    </telerik:RadTabStrip> 
        
                </div>

Is this also a known issue and is it part of the pending service pack mentioned above?

note, my team is loving the show base line. we were doing all sorts of stuff to accomplish this prior. Fortunately, this is our only multi-line tab. The single line tabs look great.
Thanks Tim T.

answered on 22 Jun 2009, 02:23 PM

tabstrip-office2-7.zip

Hello [Nean],

Please find attached the modified CSS for Office2007 skin that should work as expected.

ind regards,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.