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

Problem with Popover demo

1 Answer 230 Views
PopOver (Mobile)
This is a migrated thread and some comments may be shown as answers.
Christopher
Top achievements
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:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
</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">
    </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>
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.

1 Answer, 1 is accepted

Sort by
0
Christopher
Top achievements
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.
Tags
PopOver (Mobile)
Asked by
Christopher
Top achievements
Rank 1
Answers by
Christopher
Top achievements
Rank 1
Share this question
or