Duplicated
Last Updated: 18 Dec 2024 16:27 by ADMIN
Constantinos Petridis
Created on: 21 Nov 2024 15:48
Category: TabStrip
Type: Bug Report
0
TabStrip and TelerikThemeBuilder output compatibility

We have recently update to version 7.0.0 of Telerik for Blazor controls.
We have also access to Progress ThemeBuilder application which we use to customize the default Material theme.

After the update to version 7 and also upgrading and compiling the new theme file for our application, TabStrip items fail to display the correct css and defaults to the theme's original css.

ThemeBuilder produces rules for the tab item items with the following path

.lvs-tabstrip.k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items.k-reset.k-tabstrip-items-start .k-item.k-tabstrip-item

where the actual control generates the following

.lvs-tabstrip.k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items.k-reset.k-tabstrip-items-start .k-item

As you can see it is missing the k-tabstrip-item class and the custom theme fails to render correctly. Either Telerik blazor libary did not add this extra class to each tab item or theme builder is inserting this class when it should not. 

I can place this extra class on each TabStripTab element on its Class property, but I feel this is something that the actual Telerik for Blazor libray should do.

Looking at the source code of Telerik for Blazor library, the TabStipTab component generates add the k-item as default and then applies the value of property ClassToRender and its value is 

$"{ActiveCssClass} {DisabledCssClass} {Class} {FirstItemClass} {LastItemClass}".Trim()

The Class is an empty string, which I currently use to "fix" the problem but I certainly would like a better solution like a real fix :) 

Thank you telerik team

Duplicated
This item is a duplicate of an already existing item. You can find the original item here:
4 comments
ADMIN
Nadezhda Tacheva
Posted on: 18 Dec 2024 16:27

Hi Constantinos and everyone who follows the item,

As the issue is currently present in UI for Blazor and the KendoReact TabStrip renders the proper class, I am changing the product back to UI for Blazor TabStrip.

I am also marking the current item as a duplicate of this bug report that is already linked to our internal item.

The fix will be available in our upcoming release in February.

Regards,
Nadezhda Tacheva
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Constantinos Petridis
Posted on: 28 Nov 2024 12:50
Thank you Dimo, will wait for the fix to update our code
Anastasia
Posted on: 28 Nov 2024 12:49
Thanx for the follow up and update
ADMIN
Dimo
Posted on: 28 Nov 2024 12:47

Hello Constantinos,

The ThemeBuilder produces themes for multiple Telerik and Kendo UI products. The tool uses KendoReact for the real-time previews. It looks like the KendoReact TabStrip is still rendering the mentioned extra class, while the other web products do not.

Thus, I changed the product of this bug report and notified the team. Thanks for reporting this! I updated your Telerik points.

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.