Christopher
Top achievements
Rank 1
Rank 1
Christopher
asked on 06 Feb 2013, 03:28 PM
Greetings - I'm just getting started with Kendo Mobile and am looking at using the Popover. I've tried reproducing your demo located here: http://demos.kendoui.com/mobile/popover/index.html. I've copied and pasted the HTML from your demo into a local MVC view (I made a couple of trivial changes to load jQuery and Kendo from their respective CDNs). The complete markup from my view is as follows:
A screenshot of what I see when I view the page is attached to this post.
Basically when the page loads, it appears as if the people popover is fully expanded and covers the entire page. Any insight as to what I'm missing would be much appreciated.
<!DOCTYPE html><html><head> <title></title> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script> <link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css" rel="stylesheet"/> <link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css" rel="stylesheet"/> <link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.mobile.all.min.css" rel="stylesheet"/></head><body> <div data-role="view" data-title="Tag people" id="popover"> <div data-role="header"> <div data-role="navbar"> <a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a> <span data-role="view-title"></span> <a data-align="right" data-rel="popover" href="#popover-people" data-role="button">Select people</a> </div> </div> <div data-role="content"> <img src="http://demos.kendoui.com/content/mobile/shared/faces.jpg" 
/> </div> <div data-role="popover" id="popover-people" data-popup='{"height": 230, "width": 350}'> <div data-role="view" data-title="People"> <div data-role="header"> <div data-role="navbar"> <span data-role="view-title"></span> <a data-role="button" data-align="right" data-click="closeParentPopover">Close</a> </div> </div> <ul data-role="listview"> <li><label>Isabella Anderson<input type="checkbox"></label></li> <li><label>Josh Anderson<input type="checkbox"></label></li> <li><label>Linda Anderson<input type="checkbox"></label></li> <li><label>Oliver Anderson<input type="checkbox"></label></li> <li><label>James Williams<input type="checkbox"></label></li> <li><label>Barbara Williams<input type="checkbox"></label></li> </ul> </div> </div> <div data-role="popover" id="popover-location" data-popup='{"height": 140, "width": 350}'> <div data-role="view"> <ul data-role="listview" data-click="closeParentPopover"> <li><label>Sydney, Australia <input name="location" type="radio"></label></li> <li><label>New York, USA <input name="location" type="radio"></label></li> <li><label>Miami, USA <input name="location" type="radio"></label></li> </ul> </div> </div> <div data-role="footer"> <div data-role="navbar"> <a data-align="right" href="#popover-location" data-rel="popover" data-role="button">Select location</a> </div> </div></div><style scoped> .km-ios #popover .km-view-title, .km-ios #popover-people .km-view-title { color: #fff; text-shadow: 0 -1px rgba(0,0,0,.5); } .km-ios #popover .km-navbar, .km-root > * > #popover > .km-content { background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, rgba(255, 255, 255, 0.35)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.5, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0))) #000; } .km-ios #popover .km-navbar .km-button { background-color: #000; }</style><script> function closeParentPopover(e) { var popover = e.sender.element.closest('[data-role=popover]').data('kendoMobilePopOver'); popover.close(); }</script><script> var app = new kendo.mobile.Application(document.body);</script></body></html>Basically when the page loads, it appears as if the people popover is fully expanded and covers the entire page. Any insight as to what I'm missing would be much appreciated.
1 Answer, 1 is accepted
0
Christopher
Top achievements
Rank 1
Rank 1
answered on 06 Feb 2013, 06:36 PM
Sorry, disregard my previous post. I was using an older version of Kendo. Once I switched to the current version I was able to get things working as expected.