Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

TabStrip inside TabStrip displays unwanted bullet points in IE

5 Answers 157 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
adrian
Top achievements
Rank 1
adrian asked on 08 Sep 2013, 01:52 PM
Hi, 

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

Sort by
0
Dimo
Telerik team
answered on 09 Sep 2013, 09:56 AM
Hi Ade,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
adrian
Top achievements
Rank 1
answered on 09 Sep 2013, 06:48 PM
Hi Dimo,

Thank you for your quick response. Unfortunately, neither of your suggestions have corrected this problem. Do you have any other ideas?

Thanks,
Ade
0
Dimo
Telerik team
answered on 11 Sep 2013, 07:10 AM
Hi 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.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Thomas
Top achievements
Rank 1
answered on 09 Oct 2013, 10:58 AM
Hi,

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
0
Dimo
Telerik team
answered on 10 Oct 2013, 08:57 AM
Hello 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>
    <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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TabStrip
Asked by
adrian
Top achievements
Rank 1
Answers by
Dimo
Telerik team
adrian
Top achievements
Rank 1
Thomas
Top achievements
Rank 1
Share this question
or