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

Styling nested tabs

3 Answers 241 Views

TabStrip

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

laura asked on 21 Jun 2018, 01:42 PM

I am trying to apply a style to a nested tab strip. Specifically I am trying to set the border-top-color for the selected child tab. I can do this for the parent tab and I am able to modify other attributes of the child tab, just not that specific one.

Any insight would be appreciated.

<style>

.RadTabStrip_Vista .rtsLevel1 .rtsSelected .rtsLink {

font-family: Arial ;

border-top-color:#fdb845 ;

border-top-width:2px;

}

.childTabSelected {

font-family: Arial ;

border-top-color:#00a2ff !important ;

border-top-width:2px;

}

</style>

<form id="form1" runat="server">

<telerik:RadScriptManager runat="server" />

<div>

<telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server">

<Tabs>

<telerik:RadTab runat="server" Text="Tab1">

<Tabs>

<telerik:RadTab runat="server" Text="Child Tab 1"

SelectedCssClass="childTabSelected" />

<telerik:RadTab runat="server" Text="Child Tab 2"

SelectedCssClass="childTabSelected" />

<telerik:RadTab runat="server" Text="Child Tab 3"

SelectedCssClass="childTabSelected" />

<telerik:RadTab runat="server" Text="Child Tab 4"

SelectedCssClass="childTabSelected" />

<telerik:RadTab runat="server" Text="Child Tab 5"

SelectedCssClass="childTabSelected" />

</Tabs>

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Tab2" Selected="True">

<Tabs>

<telerik:RadTab runat="server" Text="Child Tab 2.1"

SelectedCssClass="childTabSelected" />

<telerik:RadTab runat="server" Text="Child Tab 2.2" Selected="True"

SelectedCssClass="childTabSelected" />

<telerik:RadTab runat="server" Text="Child Tab 2.3"

SelectedCssClass="childTabSelected" />

<telerik:RadTab runat="server" Text="Child Tab 2.4"

SelectedCssClass="childTabSelected" />

<telerik:RadTab runat="server" Text="Child Tab 2.5"

SelectedCssClass="childTabSelected" />

</Tabs>

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Tab3" />

</Tabs>

</telerik:RadTabStrip>

3 Answers, 1 is accepted

0

answered on 25 Jun 2018, 12:11 PM

Hi Laura,

Can you try the following CSS class which does the trick on my end:

.rtsLevel1 ~ .rtsLevel .rtsLink {

font-family: Arial;

border-top: 1px solid #00a2ff;

}

Default.aspx

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style>

.RadTabStrip_Vista .rtsLevel1 .rtsSelected .rtsLink {

font-family: Arial;

border-top-color: #fdb845;

border-top-width: 2px;

}

.rtsLevel1 ~ .rtsLevel .rtsLink {

font-family: Arial;

border-top: 1px solid #00a2ff;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server">

<Tabs>

<telerik:RadTab runat="server" Text="Tab1">

<Tabs>

<telerik:RadTab runat="server" Text="Child Tab 1"

/>

<telerik:RadTab runat="server" Text="Child Tab 2"

/>

<telerik:RadTab runat="server" Text="Child Tab 3"

/>

<telerik:RadTab runat="server" Text="Child Tab 4"

/>

<telerik:RadTab runat="server" Text="Child Tab 5"

/>

</Tabs>

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Tab2" Selected="True">

<Tabs>

<telerik:RadTab runat="server" Text="Child Tab 2.1"

/>

<telerik:RadTab runat="server" Text="Child Tab 2.2" Selected="True"

/>

<telerik:RadTab runat="server" Text="Child Tab 2.3"

/>

<telerik:RadTab runat="server" Text="Child Tab 2.4"

/>

<telerik:RadTab runat="server" Text="Child Tab 2.5"

/>

</Tabs>

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Tab3" />

</Tabs>

</telerik:RadTabStrip>

</form>

</body>

</html>

Regards,
Rumen
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

0

0

Accepted

Tags

TabStrip

Asked by

Answers by