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
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
Rank 1
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>
Hello Sagi,
I see what you describe here. There is a blog post that covers this topic.
Regards,
Petyo
Telerik