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

Tabstrip AJAX Jump

3 Answers 115 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Jeff
Top achievements
Rank 1
Jeff asked on 17 Jan 2012, 05:36 AM
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?
<!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.

3 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 18 Jan 2012, 01:40 PM
Hello Jeff,

Currently the tab content starts to load after the fade out animation is finished and since the content element hides around that moment, it is possible that the TabStrip shrinks vertically for a moment and the page may jump if your layout depends on the TabStrip height. You may work around that if you set fixed height to your TabStrip outer wrapper through its .k-tabstrip class. We will try to think of a way to change the behavior of the fade animation to not hide the previous content while the next one is still loading.

All the best,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jeff
Top achievements
Rank 1
answered on 18 Jan 2012, 08:51 PM
Thanks. Even if I disable fade effects altogether (effects: ''), I still see the hop.

In Chrome DOM inspector, I've tried deleting all CSS classes applied to parents of the tabstrip and still no go.

I'd be happy to email you the URL of the live site privately.
0
Kamen Bundev
Telerik team
answered on 19 Jan 2012, 09:42 AM
Hi Jeff,

It would be best to send us the live Url and the login credentials (if any) in a support ticket (just add a reference to this forum thread in the ticket's body as well).

Regards,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TabStrip
Asked by
Jeff
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Jeff
Top achievements
Rank 1
Share this question
or