How to remove that outer border from tabstrip ?

[AndrewRick]

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.

[Atanas Korchev]

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.

[Shane Milton]

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!!

[Shane Milton]

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>

[Atanas Korchev]

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.

[Shane Milton]

This works nicely. :-)