Styling for TabStrip Content

1 Answer 102 Views
TabStrip
Thomas
Top achievements
Rank 1
Iron
Thomas asked on 01 Dec 2023, 08:30 AM

I'm trying to add styling to a specific tabstrip content (e.g. removing the padding). But I can't seem to figure out a way to select the specific tabstrip content.

This code:

<TelerikTabStrip>

    <TabStripTab Title="General Info" Class="tab-pane-general-info">
         <div class="general-info"></div>
    </TabStripTab>

    <TabStripTab Title="Summary" Class="tab-pane-product-list">
        <div class="product-list"></div>
     </TabStripTab>

</TelerikTabStrip>

Results in the following HTML:

I don't have a way to identify the different tab contents.

I know I can select on the div I created (.general-info), but I want to remove the padding from the k-tabstrip-content for a specific tab.

Any ideas?

1 Answer, 1 is accepted

Sort by
1
Georgi
Telerik team
answered on 05 Dec 2023, 06:02 PM

Hi, Thoman,

Thank you for the provided code snippet and image!

Yes, it is possible to remove the padding of a specific TabStrip content.

You can use a ternary operator alongside the ActiveTabIndex to conditionally apply a custom style to the TabStrip that removes the padding like this:

<TelerikTabStrip @bind-ActiveTabIndex="@ActiveTabIndex" Class="@( ActiveTabIndex == 0 ? "no-padding" : string.Empty )">
    <TabStripTab Title="Tab 1">
        Content 1
    </TabStripTab>
    <TabStripTab Title="Tab 2">
        Content 2
    </TabStripTab>
</TelerikTabStrip>

<style>
    .no-padding .k-tabstrip-content {
        padding: 0;
    }
</style>

Alternatively, you can use the ActiveTabIndexChanged handler to dictate when to apply the custom style.

Kind regards,
Georgi
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Tags
TabStrip
Asked by
Thomas
Top achievements
Rank 1
Iron
Answers by
Georgi
Telerik team
Share this question
or