Hi,
When running the tabstrip in AJAX load mode, the tabstrip headers ""jump" to the right a little bit, then back to the left the first time I click on a tab. This doesn't appear to happen when I run the site locally, only when hosted remotely...so I think it must be some sort of latency issue downloading and rendering the AJAX content.
Once the tab page has been loaded the first time, switching to another tab and back doesn't cause the "jump" anymore...so I'm assuming it has something to do with the updating of the DOM the first time the tab page is rendered.
I have a mix of AJAX and non-AJAX tabs, and the issue only presents for the tabs with AJAX content (the Order tab below works fine)...so I'm pretty sure that's the culprit.
Presents in both Chrome and IE.
I've tried removing all classes and non-Kendo css from the page, but the issue persists.
Any idea what could be the issue here or how to investigate further?
Thanks.
When running the tabstrip in AJAX load mode, the tabstrip headers ""jump" to the right a little bit, then back to the left the first time I click on a tab. This doesn't appear to happen when I run the site locally, only when hosted remotely...so I think it must be some sort of latency issue downloading and rendering the AJAX content.
Once the tab page has been loaded the first time, switching to another tab and back doesn't cause the "jump" anymore...so I'm assuming it has something to do with the updating of the DOM the first time the tab page is rendered.
I have a mix of AJAX and non-AJAX tabs, and the issue only presents for the tabs with AJAX content (the Order tab below works fine)...so I'm pretty sure that's the culprit.
Presents in both Chrome and IE.
I've tried removing all classes and non-Kendo css from the page, but the issue persists.
Any idea what could be the issue here or how to investigate further?
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Hello</
title
>
<
link
href
=
"kendo.common.min.css"
type
=
"text/css"
rel
=
"stylesheet"
>
<
link
href
=
"kendo.min.css"
type
=
"text/css"
rel
=
"stylesheet"
>
<
script
src
=
"jquery.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"kendo.all.min.js"
type
=
"text/javascript"
></
script
>
</
head
>
<
body
>
<
div
id
=
"mainWrapper"
>
<
div
id
=
"main"
>
<
div
id
=
"header"
>
<
div
class
=
"float center"
>
<
h2
>Hello</
h2
>
</
div
>
</
div
>
<
div
id
=
"body"
style
=
"width: 800px;"
class
=
"float center"
>
<
div
id
=
"tabContainer"
class
=
"k-content"
>
<
div
id
=
"tabStrip"
>
<
ul
>
<
li
class
=
"k-state-active"
id
=
"Home"
>Home</
li
>
<
li
id
=
"People"
>People</
li
>
<
li
id
=
"Office"
>In The Office</
li
>
<
li
id
=
"Questions"
>Questions</
li
>
<
li
id
=
"Technology"
>Technology</
li
>
<
li
id
=
"Facts"
>Facts</
li
>
<
li
id
=
"Contact"
>Contact Us</
li
>
<
li
id
=
"Order"
>Order</
li
>
</
ul
>
<
div
></
div
>
<
div
></
div
>
<
div
></
div
>
<
div
></
div
>
<
div
></
div
>
<
div
></
div
>
<
div
></
div
>
<
div
>
<
iframe
onload
=
"$('#orderFrame').height(800).width(750);"
id
=
"orderFrame"
src
=
'https://www.google.com'
></
iframe
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
type
=
"text/javascript"
>
$(document).ready(function() {
tabStrip = $("#tabStrip").kendoTabStrip({
contentUrls: [
'Home.html',
'People.html',
'Office.html',
'Questions.html',
'Technology.html',
'Facts.html',
'Contact.html',
null
],
animation: { open: { effects: 'fadeIn' } }
});
});
</
script
>
</
body
>
</
html
>
Thanks.