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

Initial state

3 Answers 22 Views
Drawer (Mobile)
This is a migrated thread and some comments may be shown as answers.
Sagi
Top achievements
Rank 1
Sagi asked on 05 Jan 2016, 08:25 PM

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

3 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 07 Jan 2016, 01:06 PM

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!
 
0
Sagi
Top achievements
Rank 1
answered on 09 Jan 2016, 07:36 PM

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>

 

0
Petyo
Telerik team
answered on 12 Jan 2016, 03:08 PM

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!
 
Tags
Drawer (Mobile)
Asked by
Sagi
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Sagi
Top achievements
Rank 1
Share this question
or