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

Problem with Popover demo

1 Answer 302 Views

PopOver (Mobile)

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

Christopher asked on 06 Feb 2013, 03:28 PM

Capture.PNG

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:

<!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 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>

<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 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 data-role="footer">

<div data-role="navbar">

<a data-align="right" href="#popover-location" data-rel="popover" data-role="button">Select location</a>

</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>

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.

Problem with Popover demo

1 Answer, 1 is accepted