Vertical white space on tabs.

17 posts, 0 answers
  1. JFoulk
    JFoulk avatar
    14 posts
    Member since:
    Nov 2009

    Posted 12 Dec 2009 Link to this post

    I am using a radtabstrip and have noticed that there is a vertical line toward the left hand side that I can see the tabstrip background through.  How can I get rid of this?

    Thanks,

    JF
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 16 Dec 2009 Link to this post

    Hello Joshua,

    Could you please send is a screenshot showing this issue? Thanks


    Sincerely yours,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. JFoulk
    JFoulk avatar
    14 posts
    Member since:
    Nov 2009

    Posted 04 Jan 2010 Link to this post

    I have attached an image that shows the lines I'm speaking of.

    Here is the code used to generate this...

    <div style="width: 100%; float:left; text-align:left;">  
            <telerik:RadTabStrip ID="rtsMain" runat="server" Skin="Web20" MultiPageID="RadMutliPageMain" 
            SelectedIndex="0" Align="Left" BackColor="Red" Width="100%">  
            <Tabs> 
                <telerik:RadTab Text="Tab 1">  
                </telerik:RadTab> 
                <telerik:RadTab Text="Tab 2">  
                </telerik:RadTab> 
                <telerik:RadTab Text="Tab 3">  
                </telerik:RadTab> 
                <telerik:RadTab Text="Tab 4">  
                </telerik:RadTab> 
                <telerik:RadTab Text="Tab 5">  
                </telerik:RadTab> 
                <telerik:RadTab Text="Tab 6">  
                </telerik:RadTab> 
            </Tabs> 
            </telerik:RadTabStrip> 
        </div> 

    Thanks.
  5. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 06 Jan 2010 Link to this post

    Hello Joshua,

    This line appears because the selected tab is higher than the other tabs. You can make all the tabs having the same height with the following css styles:

    div.RadTabStrip_Web20 .rtsLI, div.RadTabStrip_Web20 .rtsLink {
        line-height: 24px;
    }
     
    div.RadTabStripTop_Web20 .rtsLink {
        background-position:0 -2px;
    }
     
    div.RadTabStripTop_Web20 .rtsOut {
        background-position:100% -2px;
         
    }
     
     div.RadTabStripTop_Web20 .rtsLink:hover {
        background-position:0 -54px;
    }
     
     div.RadTabStripTop_Web20 .rtsLink:hover .rtsOut {
        background-position: 100% -54px;
    }
    div.RadTabStripTop_Web20 .rtsSelected,
    div.RadTabStripTop_Web20 .rtsSelected:hover {
        background-position:0 -26px;
    }
     
    div.RadTabStripTop_Web20 .rtsSelected .rtsOut,
    div.RadTabStripTop_Web20 .rtsSelected:hover .rtsOut{
        background-position:100% -26px;
    }


    Regards,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. JFoulk
    JFoulk avatar
    14 posts
    Member since:
    Nov 2009

    Posted 09 Jan 2010 Link to this post

    I added the CSS to the top of my page.  The entire aspx markup looks like this now:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
     
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title></title>  
        <style type="text/css">  
            div.RadTabStrip_Web20 .rtsLI, div.RadTabStrip_Web20 .rtsLink  
            {  
                line-height: 24px;  
            }  
            div.RadTabStripTop_Web20 .rtsLink  
            {  
                background-position: 0 -2px;  
            }  
            div.RadTabStripTop_Web20 .rtsOut  
            {  
                background-position: 100% -2px;  
            }  
            div.RadTabStripTop_Web20 .rtsLink:hover  
            {  
                background-position: 0 -54px;  
            }  
            div.RadTabStripTop_Web20 .rtsLink:hover .rtsOut  
            {  
                background-position: 100% -54px;  
            }  
            div.RadTabStripTop_Web20 .rtsSelected, div.RadTabStripTop_Web20 .rtsSelected:hover  
            {  
                background-position: 0 -26px;  
            }  
            div.RadTabStripTop_Web20 .rtsSelected .rtsOut, div.RadTabStripTop_Web20 .rtsSelected:hover .rtsOut  
            {  
                background-position: 100% -26px;  
            }  
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        </telerik:RadScriptManager> 
        <div style="width: 100%; float: left; text-align: left;">  
            <telerik:RadTabStrip ID="rtsMain" runat="server" Skin="Web20" MultiPageID="RadMutliPageMain" SelectedIndex="0" Align="Left" BackColor="Red" Width="100%">  
                <Tabs> 
                    <telerik:RadTab Text="Tab 1">  
                    </telerik:RadTab> 
                    <telerik:RadTab Text="Tab 2">  
                    </telerik:RadTab> 
                    <telerik:RadTab Text="Tab 3">  
                    </telerik:RadTab> 
                    <telerik:RadTab Text="Tab 4">  
                    </telerik:RadTab> 
                    <telerik:RadTab Text="Tab 5">  
                    </telerik:RadTab> 
                    <telerik:RadTab Text="Tab 6">  
                    </telerik:RadTab> 
                </Tabs> 
            </telerik:RadTabStrip> 
        </div> 
        </form> 
    </body> 
    </html> 
     

    Is there anything additional that I need to do because the vertical lines are still present.  The tabs are all the same height now, however.

    Joshua Foulk
  7. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 11 Jan 2010 Link to this post

    Hello Joshua,

    I'm sorry I misunderstood the issue. Could you please check whether your browser is zoomed? The vertical lines appear only in this case at our side.

    All the best,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  8. Rajitha Reshmai
    Rajitha Reshmai avatar
    2 posts
    Member since:
    Jun 2009

    Posted 28 Nov 2012 Link to this post

    Could you please help on this issue as am suffering with the same issue. Is there any solution for this issue.
  9. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 03 Dec 2012 Link to this post

    Hello Joshua,

    Could you elaborate a bit more on the issue you have experienced? Which version of our controls do you use at your end? Additionally, do you experience the issue on a certain browser, or it is replicated under different browsers?


    Regards,
    Nencho
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. brian
    brian avatar
    36 posts
    Member since:
    Jul 2010

    Posted 18 Jan 2013 Link to this post

    Helpful.  I have the same issue.   It is ok at 100%, 120% but at 115% the lines appear.   What is the cause?
  11. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 23 Jan 2013 Link to this post

    Hi Brian,

    Actually, this is a know issue. The reasons for experienced problematic rendering are the following :

    1) Zooming resizes pictures as well. (RadTabStrip uses an image sprite)
    2) Certain percentages of zooming do not resize the picture enough so it leaves a miniature gap.

    Additionally, please refer to this article, where overcoming the browser zooming issues is described in details.

    Kind regards,
    Nencho
    the Telerik team
     
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
     
  12. Gary
    Gary avatar
    20 posts
    Member since:
    Dec 2012

    Posted 11 Jun 2014 in reply to Nencho Link to this post

    So as usual, instead of using the control out of the box, I had to dink with it and waste an hour trying to find something that should have been updated in a release.
  13. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 16 Jun 2014 Link to this post

    Hello Gary,

    Could you specify which issue are you referring to, that should have been included in the release?

    Regards,
    Nencho
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  14. Gary
    Gary avatar
    20 posts
    Member since:
    Dec 2012

    Posted 26 Jun 2014 in reply to Nencho Link to this post

    Hi Nencho.  Sorry it took me so long.  This was stuck in my junk filter.
    The vertical lines in the tabs are a big issue to my managers, and I feel this should have been caught and rectified.
    We can't keep the users from zooming in their browsers and this causes the graphics that make up the look of the tab to spread apart.  The mentioned article helped but some code to fix it would be great.

    Since HTML5 has been out, could your dev team put out a rewrite or a fix for those of us that don't have to support older browsers please?

    Can I use it without the UI skin and create my own?

    Gary
  15. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 01 Jul 2014 Link to this post

    Hello Gary,

    As with any of our controls,  you could disable the embedded Skins and styles and apply your own - custom one. I would suggest you to refer to the following articles, demonstrating in details how to create a custom skin for the RadTabStrip:
    Regards,
    Nencho
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  16. Gary
    Gary avatar
    20 posts
    Member since:
    Dec 2012

    Posted 07 Jul 2014 Link to this post

    Thanks Nencho.  I'll give that a try.  I think I still may have the same problem since the tabs are graphics.  I do like the Tab control though.  Not ready to give up yet.
    We have older users that like to keep their browsers set to more then 100%.
  17. Junhui
    Junhui avatar
    1 posts
    Member since:
    Nov 2014

    Posted 15 May 2015 Link to this post

    I have the same issues with vertical white lines in RadTab. I attached the capture with my msg. can you help?

     ​

  18. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 20 May 2015 Link to this post

    Hello Junhui,

    Did you check the zooming of your browser? As previously explained in this thread, the RadTabStrip uses a sprite image for its rendering for the Default skin. Thus, when you increase the zooming of the browser window, certain percentages of zooming do not resize the picture enough so it leaves a miniature gap.

    Regards,
    Nencho
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017