Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Vertical white space on tabs.

16 Answers 180 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
JFoulk
Top achievements
Rank 1
JFoulk asked on 12 Dec 2009, 06:20 AM
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

16 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 16 Dec 2009, 03:20 PM
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.
0
JFoulk
Top achievements
Rank 1
answered on 04 Jan 2010, 09:56 PM
lines-example.jpeg
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.
0
Yana
Telerik team
answered on 06 Jan 2010, 01:59 PM
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.
0
JFoulk
Top achievements
Rank 1
answered on 10 Jan 2010, 03:35 AM
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
0
Yana
Telerik team
answered on 11 Jan 2010, 11:09 AM
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.
0
Rajitha Reshmai
Top achievements
Rank 1
answered on 28 Nov 2012, 10:06 AM
Could you please help on this issue as am suffering with the same issue. Is there any solution for this issue.
0
Nencho
Telerik team
answered on 03 Dec 2012, 08:59 AM
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.
0
brian
Top achievements
Rank 1
answered on 18 Jan 2013, 08:55 PM
Helpful.  I have the same issue.   It is ok at 100%, 120% but at 115% the lines appear.   What is the cause?
0
Nencho
Telerik team
answered on 23 Jan 2013, 01:14 PM
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.
 
0
Gary
Top achievements
Rank 1
answered on 11 Jun 2014, 03:15 PM
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.
0
Nencho
Telerik team
answered on 16 Jun 2014, 01:28 PM
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.

 
0
Gary
Top achievements
Rank 1
answered on 26 Jun 2014, 01:19 PM
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
0
Nencho
Telerik team
answered on 01 Jul 2014, 08:13 AM
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.

 
0
Gary
Top achievements
Rank 1
answered on 07 Jul 2014, 01:19 PM
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%.
0
Junhui
Top achievements
Rank 1
answered on 15 May 2015, 02:07 PM
capture.png

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

 ​

0
Nencho
Telerik team
answered on 20 May 2015, 07:55 AM
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
Tags
TabStrip
Asked by
JFoulk
Top achievements
Rank 1
Answers by
Yana
Telerik team
JFoulk
Top achievements
Rank 1
Rajitha Reshmai
Top achievements
Rank 1
Nencho
Telerik team
brian
Top achievements
Rank 1
Gary
Top achievements
Rank 1
Junhui
Top achievements
Rank 1
Share this question
or