[Solved] Kendo Tabstrip Lining Tabs Vertically instead of Horizontally

[Charlston]

I have an issue with the Kendo TabStrip I constructed: the tabs are overlapping instead of sitting next to each other. I have tried using HtmlAttribute class on each table item itself. I am still unable to get them to be side by side. (See Code with css script. )

Does anyone have a possible solution?

 

 

<div>
    @(
                Html.Kendo().TabStrip()
                .Name("tabstrip")
                .TabPosition(TabStripTabPosition.Top)
                .Scrollable(false)
                .Animation(animation =>
                animation.Open(effect =>
                effect.Fade(FadeDirection.In)))
                .Items(tabstrip =>
                {
                        tabstrip.Add().Text("Pilot Profile").Selected(true).Encoded(false)
                        .Content(
                            @<text>@await Html.PartialAsync("_pilotProfile", Model)</text>
                        );
                         tabstrip.Add().Text("History").Encoded(false)
                        .Content(
                            @<text>@await Html.PartialAsync("_pilotHistory", Model)</text>
                        );
                        if (!string.IsNullOrEmpty(Model.ContactList?.CallScriptText))
                        {
                        tabstrip.Add().Text("Call Script").Encoded(false)
                                .Content(
                            @<text>@await Html.PartialAsync("_callScript", Model)</text>);
                        }
                        if (Model.ContactList != null)
                        {
                            tabstrip.Add().Text("Assessment").Encoded(false)
                                .LoadContentFrom("Assessment", "Pilots", new { PilotId = Model.PilotId, Campaign = Model.ContactList.ContactListId });
                        }
                        else
                        {

                            tabstrip.Add().Text("Assessment").Encoded(false)
                                .LoadContentFrom("Assessment", "Pilots", new { PilotId = Model.PilotId });
                        }

                  

                })
        )
</div>

<style scoped>
    @@media only screen and (max-width: 991px) {
        #tilelayout {
            grid-template-columns: repeat(1, minmax(0px, 100%)) !important;
            grid-auto-rows: minmax(0px, auto) !important;
        }

        .k-tilelayout .k-card {
            box-shadow: none;
            border-width: 1px;
            height: auto;
        }


        .k-tilelayout-item[data-index="2"] {
            display: none;
        }
    }

    .pilot {
        margin: 0 auto 30px;
        text-align: center;
    }

    #tabstrip h2 {
        font-weight: lighter;
        font-size: 5em;
        line-height: 1;
      
        margin: 0;
    }

        #tabstrip h2 span {
            background: none;
            padding-left: 5px;
            font-size: .3em;
            vertical-align: top;
        }

    #tabstrip p {
        margin: 0;
        padding: 8px;
    }

    #tabstrip .k-tabstrip-items .k-item {
        display: inline-block;
    }

    #tabstrip .k-tabstrip-items {
        display: block;
    }

    .k-tabstrip-items .k-item {
        display: inline-block;
    }
</style>

[Vasko]

Hi Charlston,

I see that your TabStrip tabs are overlapping, and you've tried using the HtmlAttribute property on each tab item. However, this property mainly affects the HTML attributes of the tab content container, not the tab headers themselves. The alignment issue is mostly related to CSS targeting the tab header classes.

Starting with the 2026 Q1 release, the TabStrip no longer uses the .k-item class for tab items. The new class is .k-tabstrip-item. Your current CSS is targeting .k-item, which means it does not affect the latest TabStrip rendering.

You need to update your CSS selectors to use .k-tabstrip-item instead of .k-item. Here is the revised CSS:

#tabstrip .k-tabstrip-items .k-tabstrip-item {
    display: inline-block;
}

#tabstrip .k-tabstrip-items {
    display: block;
}

.k-tabstrip-items .k-tabstrip-item {
    display: inline-block;
}

Replace all occurrences of .k-item with .k-tabstrip-item in your styles.

Regards,
Vasko
Progress Telerik

[Charlston]

thank you for that update