TabStrip inside TabStrip displays unwanted bullet points in IE

6 posts, 0 answers
  1. adrian
    adrian avatar
    2 posts
    Member since:
    Sep 2013

    Posted 08 Sep 2013 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 09 Sep 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. adrian
    adrian avatar
    2 posts
    Member since:
    Sep 2013

    Posted 09 Sep 2013 Link to this post

    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
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 11 Sep 2013 Link to this post

    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!
  6. Thomas
    Thomas avatar
    1 posts
    Member since:
    Jan 2012

    Posted 09 Oct 2013 Link to this post

    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
  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 10 Oct 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready