Quantcast
Channel: Telerik Forums RSS
Viewing all articles
Browse latest Browse all 84751

Initial state

$
0
0

Hi,

I have created a snippet that illustrate this issue.http://dojo.telerik.com/eteNa

 If you cant repreduce it in the first time please click refresh (in the simulator) few times, and you will be able to see it.

btw , The filckering does looks to me like something that might happen (although not acceptablee) since when the page first loads 

the html starts to render and only than we are calling to :

 var app = new kendo.mobile.Application(document.body, { skin: "nova" });

 

so ,In the time until the mobile application is created and parses all elemets the page shows the un-parsed html.

To double check this I have removed  var app = new kendo.mobile.Application(document.body, { skin: "nova" });

and noticed that this is exactly what I see in the brief of a second when this line does exist.

 

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script></head>
<body>
    <div data-role="view" id="test1" data-layout="drawer-layout" data-title="ראשי" data-use-native-scrolling="true">

        <a data-role="button" href="#test2" data-transition="slide">test</a>


        <a data-role="button">general list</a>


    </div>

    <div data-role="view" id="test2"  data-layout="drawer-layout" data-title="Starred Items" data-use-native-scrolling="true">

    </div>


    <div data-role="view" id="test3"  data-layout="drawer-layout" data-title="Starred Items" data-use-native-scrolling="true">
 
        <div data-role="content" id="content11" class="km-content km-stretched-view">
            <div class="km-listview-wrapper">
                <ul data-role="listview" id="external-resources1" class="km-widget km-listview km-list">
                    <li data-icon="favorites"><a href="#test1" data-transition="none" class="km-listview-link" data-role="listview-link">Test  1</a></li>
                 </ul>
            </div>


        </div>

        <div data-role="footer" class="km-footer">
            <div style="height:50px"></div>
        </div>

    </div>


    <div data-role="drawer" id="my-drawer" style="width: 20em" data-stretch="true" data-before-show="disableInSourceCode" class="km-widget km-view km-drawer km-left-drawer" style="display: flex;">
        <div data-role="header" class="km-header">
            <div data-role="navbar" class="km-widget km-navbar">
                <div class="km-show-title km-fill-title">
                </div>
            </div>
        </div>

        <div data-role="content" id="content" class="km-content km-stretched-view">
            <div class="km-listview-wrapper">
                <ul data-role="listview" id="external-resources" class="km-widget km-listview km-list">
                    <li data-icon="favorites"><a href="#test1" data-transition="none" class="km-listview-link" data-role="listview-link">Test  1</a></li>
                    <% if (IsVisible) { %>
                    <li data-icon="favorites"><a href="#test2" data-transition="none" class="km-listview-link" data-role="listview-link">Test  2</a></li>

                    <%} %>


                    <li><a data-rel="external" href="#test3" class="km-listview-link" data-role="listview-link">Test 3</a></li>
                </ul>
            </div>


        </div>

        <div data-role="footer" class="km-footer">
            <div class="km-listview-wrapper">
                <ul data-role="listview" class="km-widget km-listview km-list">
                    <li><a data-rel="external" href="http://www.telerik.com/company/terms-of-use" class="km-listview-link" data-role="listview-link">Terms of Use</a></li>
                    <li><a data-rel="external" href="http://www.telerik.com/company/product-improvement-program" class="km-listview-link" data-role="listview-link">Product Improvement Program</a></li>
                    <li><a data-rel="external" href="http://www.telerik.com/company/offices" class="km-listview-link" data-role="listview-link">Contact Us</a></li>
                </ul>
            </div>
        </div>

    </div>

    <div data-role="layout" data-id="drawer-layout">
        <header data-role="header">
            <div data-role="navbar">
                <a data-role="button" id="drawer" data-rel="drawer" href="#my-drawer" data-icon="hamburger" data-align="left"></a>
                <span data-role="view-title"></span>
                <a data-align="right" data-role="button" class="nav-button" data-icon="home" data-transition="slide" href="#/"></a>
            </div>
        </header>
    </div>
    <script>
 
    var app = new kendo.mobile.Application(document.body, { skin: "nova" });
     </script>

</body>
</html>

 


Viewing all articles
Browse latest Browse all 84751

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>