Telerik Forums
UI for Blazor Forum
1 answer
25 views
Hi,

I'm currently using a TelerikForm with built-in validation and TelerikTabStrip to split the form into multiple tabs. I’m using a single shared EditContext for the entire form, covering fields across all tabs.

The issue I'm facing:
When I trigger form validation (e.g. by clicking Submit), only the fields in the currently visible tab get proper validation UI (.k-invalid, red borders, etc.). Fields in tabs not yet visited do not show red borders around input fields — only the validation summary displays the error messages (and labels are red for those fields which is ok).

You can observe this issue directly in your own official demos:
Demo

Once I manually visit each tab, the fields inside do react to validation as expected (input fields appear with red borders). But still - all of it works only with PersistTabContent parameter set to true (meaning behaviour when user visits some tabs, clicks submit elsewhere and gets back to tabs already visited.) without PersistTabContent checked - it doesn't work at all.

This behavior leads to a confusing and inconsistent UX, especially in forms that do not have visible labels next to each field — users don’t realize what’s wrong until they manually visit every tab.

My questions:
-Is there any workaround to make validation styles apply to inputs in all tabs, even those not yet rendered without need to manually render all the tabs content?
-Is there a planned feature or improvement to address this?
If not, I’d like to formally request this as must-have functionality.
As it stands now, this issue severely degrades the user experience. Validation messages show in the summary, but without any visual feedback in the inputs — especially in unvisited tabs — users are left confused.
In practical terms, tabs become unusable for serious forms when this happens. If users have to manually check every tab just to find the highlighted fields, it defeats the purpose of having tabs in the first place.

Thanks for any help!
-Bohdan
Hristian Stefanov
Telerik team
 answered on 11 Jun 2025
0 answers
11 views

Hi, I am using again the TabStrip component so that it's displayed vertically as in my previous post tabstrip vertical, from what I understand, it has to have an absolute value as pixels in the Height property to render/displays correctly, right ? If so, is support planned for the future?

Thanks in advance

Hadrian
Top achievements
Rank 1
Iron
 asked on 10 Jun 2025
0 answers
17 views

On both the Tab strip selected tab and the grid header, there's a mouseover / hover effect which thickens the bottom border by 1px;

Standard;

Hover;

I've been trying to remove this effect (largely since it causes a height change), but not having any luck identifying the right CSS classes to modify. I still want the selected tab to be highlighted, and if possible to remove the mouseover on unselected tabs - this gives the bottom a thin border with the same height problem.

Any help greatly received!

Richard
Top achievements
Rank 1
Iron
Iron
 updated question on 22 May 2025
1 answer
47 views

I'm having some trouble with the TelerikTabStrip component. The following snippet should reproduce my issue:

<TelerikTabStrip @bind-ActiveTabIndex="@activeTabIdx">
  @{
    foreach (var tab in Tabs)
    {
      <TabStripTab Title=@tab.Key></TabStripTab>
    }
  }
</TelerikTabStrip>


@code {
  public Dictionary<string, string> Tabs { get; set; }

  public int activeTabIdx { get; set; } = 0;

  protected override void OnInitialized()
  {

    Tabs = new Dictionary<string, string>();
    Tabs.Add("1", "1");
    Tabs.Add("2", "2");
    Tabs.Add("3", "3");
    Tabs.Add("4", "4");
  }

  protected override void OnParametersSet()
  {

  }

Currently, whenever I change a tab, although activeTabIdx is updated, the previous tab remains highlighted along with the currently selected one and so on, i.e, the previous tab highlight does not disappear indicating it had beeen deselected. Has anyone incurred to a similar problem? 

Thank you

Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
 answered on 11 Apr 2025
1 answer
31 views

Hi everyone,

I'm working with the Telerik TabStrip component and need help with two issues:

  1. Tab Transition on Button Click: When I click the chevron buttons to navigate through the tabs, I want the visible tabs to change with a smooth transition effect. However, I'm having trouble applying a transition effect for this behavior. Can anyone provide guidance or an example of how to implement a transition when the visible tabs change?

  2. Aligning Tabs on Button Click: When I press the chevron buttons, I want the active tab to remain the same, but the newly visible left-most tab should be aligned at the start (left side) of the TabStrip. How can I ensure that after clicking a chevron, the newly displayed tabs are aligned to the start of the TabStrip?

Any suggestions or code snippets that could help resolve these issues would be greatly appreciated!

Thanks in advance!

Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
 answered on 05 Apr 2025
1 answer
54 views

I am new to using the UI for Blazor products.  I added the code from https://www.telerik.com/blazor-ui/documentation/components/tabstrip/overview

The control renders but I am not able to select the 3d tab, the control remains on the first tab.  Any help on why would be appreciated.

Here is the code from the razor page.

@page "/Reports/report-main"

@using Telerik.Reporting;
@using Telerik.Blazor.Components;

<h3>Report Main</h3>

<!-- Tabs -->
<div>
    <TelerikTabStrip>
        <TabStripTab Title="First">
            First tab content.
        </TabStripTab>
        <TabStripTab Title="Second" Disabled="true">
            Second tab content. This tab is disabled and you cannot select it.
        </TabStripTab>
        <TabStripTab Title="Third">
            Third tab content.
        </TabStripTab>
    </TelerikTabStrip>
</div>

@code {

}
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
 answered on 16 Mar 2025
1 answer
52 views

I'm using a collection of tabs to display PDF files. For example, I have two tabs open and the current document is scrolled to about mid document. Now I add a new document in a new tab. The new document and all others will scroll to the same spot as the previously active tab. I'd like to retain the position of documents in any open tabs while having the document in the new tab open to the top of the first page.

If I have multiple tabs open and documents scrolled to various positions they do not change simply switching from tab to tab. The change only occurs when adding a new tab.

 

Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
 updated answer on 28 Feb 2025
1 answer
43 views

Probably a bit of a vague question, but is there any way to make the “TabStrip” component tab texts appear vertically or is it planned to support this behavior sometime? I've tried modifying it a bit via css but I'm having problems with containers. I think I'm probably not using the right component for what I want to achieve... but if it helps anyone who is looking for the same idea it is already reflected here.

Hristian Stefanov
Telerik team
 answered on 21 Jan 2025
1 answer
75 views

I am trying to convert implement the TelerikTabStrip and was largly successful however I have a component that contains conditional logic that adds between 0 and 2 additional tabs to the parent components tabStrip. Unfortuately these tabs are not rendering correctly. I was able to replicate a minimum reproducable example in the blazor REPL environment using the following code. Are you able to advise how I can add tabs to a parents tabstrip, my two rendering issues are:

  1. When PersistTabContent is true (works as expected when false) the tabs don't render any content (I need the tabs to persist so turning it off isn't a good fix); and
  2. Regardless of if the tabs are persistant or not the subComponent tabs are still shown as "Active" and show the tabs as selected causing the appearence of multiple selected tabs 

Main.razor

<TelerikTabStrip PersistTabContent="true">
    <TabStripTab Title="tab1">
        <p>tab1 content</p>
    </TabStripTab>
    <TabStripTab Title="tab2">
        <p>tab2 content</p>
    </TabStripTab>
    <TabStripTab Title="tab3">
        <p>tab3 content</p>
    </TabStripTab>
    <SubComponent />
</TelerikTabStrip>

SubComponent.razor

<TabStripTab Title="tab4">
    <p>tab4 content</p>
</TabStripTab>
<TabStripTab Title="tab5">
    <p>tab5 content</p>
</TabStripTab>

Screenshots:

initial render:

Clicking on tab 1, 2 or 3 works as expected:

clicking on 4 or 5 shows no content:

Then clicking back to 1, 2 or 3 shows 4 and/or 5 as still selected:

 

 


Yanislav
Telerik team
 answered on 11 Oct 2024
1 answer
66 views

Hi,

When using Telerik Tabs, the content of a tab might refresh every time you navigate to it due to how Blazor's component rendering lifecycle works.

How to stop refreshing the tab content every time I navigate to and from it.

Regards,

Omar

Dimo
Telerik team
 answered on 05 Sep 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?