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

How to remove that outer border from tabstrip ?

5 Answers 87 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
AndrewRick
Top achievements
Rank 1
AndrewRick asked on 08 May 2010, 08:37 PM
Hello,

I'm wondering what kind of CSS magic will I have to do in order to remove that outer border (with padding) from a tabstrip (and it's contents). I want it to be like a more traditional tabstrip (like in Telerik ASP.NET Ajax for example, or JQuery Tools).

Hope you understand what I mean.

Best wishes,
Andres R.

5 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 10 May 2010, 10:19 AM
Hello Andres Raieste,

You can try this:

<style type="text/css">
div.t-tabstrip
{
    border: 0 none;
    background:none;
}
div.t-tabstrip .t-tabstrip-items
{
    padding:0;
}

div.t-tabstrip .t-tabstrip-items .t-item
{
    background:url("/Content/Vista/sprite.png") repeat-x scroll 0 -352px #4EB106;
}

.t-tabstrip .t-content {
    padding:0;
    margin:0;
}
</style>


You may need to tweak the path to the sprite image depending on the skin name and skin location.

Regards,
Atanas Korchev
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.
0
Shane Milton
Top achievements
Rank 2
answered on 10 May 2010, 09:54 PM
I'd also like to do this but the included CSS is not providing what I'm looking for. I'm attaching an image of what I'm starting with (the middle version), what the previously-suggested CSS provides (top with green buttons) and what would be ideal for me (bottom). I like the white space around the grid that's provided by the tab, but I don't like the grey box around the tabs.

Thanks!!
0
Shane Milton
Top achievements
Rank 2
answered on 10 May 2010, 10:00 PM
The closest I can get is this, but I lose the ability to have the selected tab be white while the unselected tabs are gray:

<style type="text/css"
div.t-tabstrip 
    border: 0 none; 
    background:none; 
 
div.t-tabstrip .t-tabstrip-items .t-item 
    background:url("/Content/Simple/sprite.png") repeat-x scroll 0 -352px #CCCCCC; 
 
</style> 
 

0
Atanas Korchev
Telerik team
answered on 11 May 2010, 07:29 AM
Hello Shane Milton,

Here is the required CSS for the Simple skin (there is no background image there hence the earlier provided CSS does not work):

<style type="text/css">
div.t-tabstrip
{
    border: 0 none;
    background:none;
}

div.t-tabstrip .t-tabstrip-items .t-item
{
    background-color:#E6E6E6;
}
div.t-tabstrip .t-tabstrip-items .t-state-active
{
    background-color:#fff;
}
</style>


Regards,
Atanas Korchev
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.
0
Shane Milton
Top achievements
Rank 2
answered on 12 May 2010, 09:39 AM
This works nicely. :-)
Tags
TabStrip
Asked by
AndrewRick
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Shane Milton
Top achievements
Rank 2
Share this question
or