2009 Q1 Tabstrip - Bug in Multiline

9 posts, 0 answers
  1. Steve Y
    Steve Y avatar
    115 posts
    Member since:
    Sep 2008

    Posted 14 Mar 2009 Link to this post

    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
  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 16 Mar 2009 Link to this post

    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-imageurl(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.
  3. Steve Y
    Steve Y avatar
    115 posts
    Member since:
    Sep 2008

    Posted 16 Mar 2009 Link to this post

    Thanks for the heads-up on the isBreak thing. I actually found the bug when I had a tabstrip too long for  a container and the tabstrip wrapped and showed the issue. I used the isBreak to force it so you could see the issue. I've never used it before so it's good to know how it's really used...

    The workaround works as long as ShowBaseLine="true". If it's not, then a line is drawn in the middle (vertically) of the tabstrip for the width of the empty portion of the tabstrip.

    Regards, Steve


  4. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 17 Mar 2009 Link to this post

    Hi Steve Y,

    Indeed, this is strange. Unfortunately, we were not able to repro the issue on our side. Still, we'll do our best to fix the Office2007 skin and upload it till the end of week.

    Greetings,
    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.
  5. Tim
    Tim avatar
    85 posts
    Member since:
    Feb 2008

    Posted 19 Mar 2009 Link to this post

    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


    1 <div style="width: 100%">  
    2         <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Width="100%" Skin="Vista" ShowBaseLine="true">  
    3             <Tabs> 
    4                 <telerik:RadTab runat="server" Text="Address" Selected="true" /> 
    5                 <telerik:RadTab runat="server" Text="Details" /> 
    6                 <telerik:RadTab runat="server" Text="Tax" /> 
    7                 <telerik:RadTab runat="server" Text="Insurance" IsBreak="true" /> 
    8                 <telerik:RadTab runat="server" Text="RIO" /> 
    9                 <telerik:RadTab runat="server" Text="HOA" /> 
    10             </Tabs> 
    11         </telerik:RadTabStrip> 
    12     </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.
  6. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 20 Mar 2009 Link to this post

    Hi Tim,

    The Vista skin will be fixed as well.

    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.
  7. [Nean]
    [Nean] avatar
    42 posts
    Member since:
    Mar 2009

    Posted 19 Jun 2009 Link to this post

    Hello,

    I now use the Converted Skins (from 2008 Q3) with the version 2009 Q1, but now my tabstrip stay in one line (it was in two lines with the 2008 Q3 and with the original skin of 2009 Q1), even if i put Isbreak="true" on one of the tabs. I use the Office2007 converted skin.

    Is anyone an idea of what might be the problem ?


    Regards,

    [Nean]

  8. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 22 Jun 2009 Link to this post

    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.
  9. [Nean]
    [Nean] avatar
    42 posts
    Member since:
    Mar 2009

    Posted 23 Jun 2009 Link to this post

    Hi Paul,

    Thanks, it works perfectly !


    Regards

    [Nean]
Back to Top