I have 2 tabstrips, one parent and one child. In IE this renders bullet points beside each tab. Works fine in Chrome, but my target browser is IE (unfortunately).
I have created a very simple example on JS Bin to illustrate this http://jsbin.com/EPoDUpE/2. Click Tab 3. This shows the child tabstrip with items Tab3.1, Tab3.2 etc. You will see each of these tabs have bullet points beside them. Am I doing something wrong? Or is this a bug with the framework?
I have another issue with the display of the child tabstrip and that is, it indents itself, I can't seem to prevent this. I would like it to be the exact width and inline with the parent tabstrip. How do I correct this?
Thanks,
Ade
5 Answers, 1 is accepted
The problem is caused by a browser bug. You can avoid it by initializing the inner TabStrip first. An alternative approach is to force element repaint with:
$(
".k-tabstrip-items .k-item"
).css(
"zoom"
, 1);
The above code must be executed when the inner TabStrip is visible, e.g. in the outer TabStrip's activate event.
http://demos.kendoui.com/web/tabstrip/events.html
Regards,
Dimo
Telerik

Thank you for your quick response. Unfortunately, neither of your suggestions have corrected this problem. Do you have any other ideas?
Thanks,
Ade
Please check the following video, which shows the suggested technique in action:
http://screencast.com/t/qUk3ZZTpSyz
http://jsbin.com/EPoDUpE/5
For the time being I have no other ideas, because IE rendering bugs are normally worked around by forcing a redraw of the problematic elements.
Dimo
Telerik

I'm having the exact same problem. The version of kendo I have is kendoui.web.2013.2.918.commercial.
I have tested your latest JS Bin example (http://jsbin.com/EPoDUpE/5) and found that it works correctly for me. Copy and paste it out into a html file and open in IE works great. However, if we update the urls to use the latest open source version of the kendo libraries ( http://cdn.kendostatic.com/2013.2.716/.... ) it continues to work in JS Bin. Copy and Paste it out into a html file and open in IE and the bullet points are still there.
I would appreciate a speedy response.
Thanks,
Thomas
In general, such issues are resolved by adding or removing styles, or by triggering hasLayout. Depending on the exact scenario, setTimeout may need to be used.
Here is a modified version of the previous example, which works on my side. You may need to increase the timeout, which may cause visible flickering.
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>TabStrip repaint in IE</
title
>
<
link
href
=
"http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"http://cdn.kendostatic.com/2013.2.716/styles/kendo.blueopal.min.css"
rel
=
"stylesheet"
/>
<
script
src
=
"http://cdn.kendostatic.com/2013.2.716/js/jquery.min.js"
> </
script
>
<
script
src
=
"http://cdn.kendostatic.com/2013.2.716/js/kendo.web.min.js"
> </
script
>
<
style
>
.foo{zoom:1.1}
</
style
>
<
script
type
=
"text/javascript"
>
$(document).ready(function($) {
function repaintTabs(e) {
window.setTimeout(function(){
if (kendo.support.browser.msie) {
$(e.contentElement).find(".k-tabstrip-items .k-item").each(function(){
var thisObj = this;
$(thisObj).addClass("foo");
window.setTimeout(function(){
$(thisObj).removeClass("foo");
}, 10);
});
}
}, 1);
}
$("#tabstrip").kendoTabStrip({
activate: repaintTabs
});
$("#tabstrip2").kendoTabStrip();
});
</
script
>
</
head
>
<
body
>
<
div
id
=
"tabstrip"
>
<
ul
>
<
li
class
=
"k-state-active"
>
Tab1
</
li
>
<
li
>
Tab2
</
li
>
<
li
>
Tab3
</
li
>
</
ul
>
<
div
class
=
"step"
id
=
"l"
></
div
>
<
div
id
=
"es"
></
div
>
<
div
id
=
"ld"
>
<
div
>
<
div
id
=
"tabstrip2"
>
<
ul
>
<
li
class
=
"k-state-active"
>
Tab2.1
</
li
>
<
li
>
Tab2.2
</
li
>
<
li
>
Tab2.3
</
li
>
<
li
>
Tab2.4
</
li
>
<
li
>
Tab2.5
</
li
>
<
li
>
Tab2.6
</
li
>
</
ul
>
<
div
id
=
"a"
></
div
>
<
div
id
=
"b"
></
div
>
<
div
id
=
"c"
></
div
>
<
div
id
=
"d"
></
div
>
<
div
id
=
"e"
></
div
>
<
div
id
=
"f"
></
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
Regards,
Dimo
Telerik