The following HTML results in error: Unable to get property 'top' of undefined or null reference, when you set your browser to emulate a tablet such as an IPad.
Codepen is here
The following HTML results in error: Unable to get property 'top' of undefined or null reference, when you set your browser to emulate a tablet such as an IPad.
Codepen is here
http://codepen.io/jcbowyer/pen/wGrLmE
<html><head> <meta charset="utf-8"> <title>Kendo UI Mobile Loves AngularJS</title> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css"> <!-- the application CSS file --> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script> <script src="http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"></script></head><body kendo-mobile-application ng-app="sushiMobileApp"> <kendo-mobile-view id="index"> <kendo-mobile-header> <kendo-mobile-nav-bar> Home View <button kendo-mobile-button k-align="'right'" data-icon="'contacts'" id="btnProfile" k-on-click="mnuProfile.open($('#btnProfile'))"></button> </kendo-mobile-nav-bar> </kendo-mobile-header> <ul kendo-mobile-action-sheet="mnuProfile" k-on-command="onCommand(kendoEvent)" k-type="'auto'"> <li><a href="#" data-command="login">Login</a></li> <li ng-hide="(authentication.token.length == 0)"><a href="#" data-command="logout">Logout</a></li> <li><a href="#" data-command="showProfile">My Profile</a></li> </ul> </kendo-mobile-view> <script> angular.module('sushiMobileApp', [ 'kendo.directives' ]); </script></body></html>3 Answers, 1 is accepted
0
Hi,
most likely, the problem is due to the on-click event handler being evaluated before the elements (including the button) is present in the DOM. I may suggest that you move it to a scope field instead, or use the data-rel syntax which is built-in mechanism for opening an actionsheet from a button.
Regards,
Petyo
Telerik
most likely, the problem is due to the on-click event handler being evaluated before the elements (including the button) is present in the DOM. I may suggest that you move it to a scope field instead, or use the data-rel syntax which is built-in mechanism for opening an actionsheet from a button.
Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Patrick
Top achievements
Rank 1
Rank 1
answered on 05 Apr 2016, 03:47 PM
Thanks for your response
1. I am not clear what you mean by move it to a scope field, can you provide more explanation?
2. On the data-rel syntax, this does not appear to work in angular. There may be an equivalent k-rel syntax but I can find no examples or documentation of how to use it.
If you could provide a sample or more guidance on how I could fix this in my sample, I would greatly appreciate it.
0
Patrick
Top achievements
Rank 1
Rank 1
answered on 05 Apr 2016, 04:02 PM
I figured out how to get this work with k-rel.
Updated code is below
Codepen here
http://codepen.io/jcbowyer/pen/KzyQwa
<html><head> <meta charset="utf-8"> <title>Kendo UI Mobile Loves AngularJS</title> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css"> <!-- the application CSS file --> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script> <script src="http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"></script></head><body kendo-mobile-application ng-app="sushiMobileApp"> <kendo-mobile-view id="index"> <kendo-mobile-header> <kendo-mobile-nav-bar> Home View <a kendo-mobile-button k-align="'right'" data-icon="'contacts'" id="btnProfile" k-rel="'actionsheet'" href="#mnuProfile"></a> </kendo-mobile-nav-bar> </kendo-mobile-header> <ul kendo-mobile-action-sheet="mnuProfile" id="mnuProfile" k-on-command="onCommand(kendoEvent)" k-type="'auto'"> <li><a href="#" data-command="login">Login</a></li> <li ng-hide="(authentication.token.length == 0)"><a href="#" data-command="logout">Logout</a></li> <li><a href="#" data-command="showProfile">My Profile</a></li> </ul> </kendo-mobile-view> <script> angular.module('sushiMobileApp', [ 'kendo.directives' ]); </script></body></html>