Problem with Popover demo

2 posts, 0 answers
  1. Christopher
    Christopher avatar
    4 posts
    Member since:
    Dec 2010

    Posted 06 Feb 2013 Link to this post

    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.

  2. Christopher
    Christopher avatar
    4 posts
    Member since:
    Dec 2010

    Posted 06 Feb 2013 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
Back to Top