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

Kendo Tab Strip(AngularJS) issues

1 Answer 151 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
n/a
Top achievements
Rank 1
n/a asked on 10 Feb 2021, 11:35 PM

Hi

 

I am having two issues with Kendo Tab Strip(AnguarJS) as followings:

1) Default HTML tag 'li' is showing before Kendo Tab strip is applied

- Default HTML tag 'li' is showing for 1 second(see the screenshot '1') and then Kendo Tab strip is applied

- I tried to use ng-cloak and also k-ng-delay, it is still showing default HTML tag

- I do not want to show default HTML tag, I want to display Kendo Tab Strip once it is fully initialized

- *I am using ng-repeat for dynamic tab, not data-bound. I prefer to use ng-repeat as each tab contents are quiet large

 

2) After add a new tab(by some button), UI for a new tab is broken

- As I mentioned above, I am using ng-repeat and add a new object to existing array to add a new tab.

- I guess this would be a bug, it would be great if you can provide the example with ng-repeat scenario

 

Kind regards

Minchul

 

1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 12 Feb 2021, 12:36 PM

Hi Minchul,

Cases like this, when the text appears just before the styles are applied, are known as FOUC (flash of unstyled content). In such cases we recommend hiding the content (you can wrap the tabstrip in a div container and hide it with CSS) initially and showing it with a delay.

The following dojo show how this can be done: https://dojo.telerik.com/EHIyECiD It also demonstrates adding a new tab on clicking a button. The tab is not broken and works as expected, so I would suggest using this approach.

Regards,
Ivan Danchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TabStrip
Asked by
n/a
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or