Can't see ListView

2 posts, 0 answers
  1. Idan
    Idan avatar
    76 posts
    Member since:
    Oct 2012

    Posted 24 Oct 2013 Link to this post

    I put the following code for a listView inside a view-content div which is inside a tabstrip -- however, I can't see the listView in the simulator nor on my device.

    Here's the code:

    <div id="tabstrip-home" 
                 data-role="view"  
                 data-title="Home">
    <div class="view-content">
    <
    div data-role="view" data-init="initListView" data-style="inset">
                        <ul id="listView">
                            <li>asdasd</li>
                            <li>asdasd</li>
                            <li>asdasd</li>
                            <li>asdasd</li>
                            <li>asdasd</li>
                            <li>asdasd</li>
                            <li>asdasd</li>
                            <li>asdasd</li>
                        </ul>
                    </div>
     
                    <script>
                        function initListView(e) {
                            e.view.element.find("#listView").kendoMobileListView();
                        }
                    </script>
    </div>
    </div>

    I have the kendo mobile minified js in the head.

    Anything that I'm missing here?

    I think that it's invisible because I nested that view inside another view. When I take the UL from within that view I see the UL on the page. I want the ListView to be within another view and not take the whole screen

    Thanks in advance.
  2. Nikola
    Admin
    Nikola avatar
    22 posts

    Posted 28 Oct 2013 Link to this post

    Hi Idan,

    From the Kendo UI Docs,

    The Kendo mobile View widget represents a screen in the kendo mobile Application. The Application automatically instantiates a mobile View for each element with a role data attribute set to view.

    Therefore, nesting a view inside another view doesn't really make sense and will not limit the size of the listview.

    If you want to limit its size, you could use
    #tabstrip-home #listView {
        max-height:200px;
    }
    inside your .css file.

    Please let me know if you have further questions. Regards,
    Nikola
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
Back to Top