Initial state

4 posts, 0 answers
  1. Sagi
    Sagi avatar
    60 posts
    Member since:
    Sep 2008

    Posted 05 Jan Link to this post

    Hello ,

    When my web app loads the drawer is appearing for the first few  miliseconds and than closes immediatly.

    How can I make the drawer be closed when the app loads and not wait for it to close ?

    Currently , the user see the drawer opens and than closes 

    Thx

    Sagi

  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 07 Jan Link to this post

    Hello Sagi,

     

    this does not sound like a known issue. Can you replicate it in a Dojo? We will examine it more closely.

     

    Regards,
    Petyo
    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. Sagi
    Sagi avatar
    60 posts
    Member since:
    Sep 2008

    Posted 09 Jan in reply to Petyo Link to this post

    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>

     

  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 12 Jan Link to this post

    Hello Sagi,

     

    I see what you describe here. There is a blog post that covers this topic.

     

    Regards,
    Petyo
    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