Question

I have implemented a left side list view in split view using the following jQuery mobile phonegap code

        <div data-role="page"  id="main" data-hash="false">

            <div data-role="header">
                <h1>Main</h1>
            </div><!-- /header -->

            <div data-role="content" data-theme="c">    




                <ul data-role="listview" data-theme="c" data-header-theme="a">





                    <li>first Row contains 8 list items
                        <ul>
                            <li data-role="list-divider" data-header-theme="c">One item</li>  <!----------- Section Header -------->
                            <li><a href="#siteInfo" data-panel="main">One item</a></li>
                            <li><a href="#siteContacts" data-panel="main">One itemts</a></li>
                            <li><a href="#siteProviders" data-panel="main">One item</a></li>

                            <li data-role="list-divider" data-divider-theme="c">One item</li>  <!---------- Section Header -------->
                            <li><a href="#equipment" data-panel="main">One item</a></li>
                            <li><a href="#scroll" data-panel="main">One itemrts</a></li>
                            <li><a href="#context" data-panel="main">One iteme</a></li>
                            <li><a href="#context" data-panel="main">Data commissioned</a></li>
                        </ul>
                    </li>
                    <li>Second Row contains 8 list items
                        <ul>
                            <li data-role="list-divider" data-header-theme="a">One item</li> 
                            <li><a href="#siteInfo" data-panel="main">One item</a></li>
                            <li><a href="#siteContacts" data-panel="main">One itemts</a></li>
                            <li><a href="#siteProviders" data-panel="main">One item</a></li>

                            <li data-role="list-divider" data-divider-theme="c">One item</li>  <!---------- Section Header -------->
                            <li><a href="#equipment" data-panel="main">One item</a></li>
                            <li><a href="#scroll" data-panel="main">One itemrts</a></li>
                            <li><a href="#context" data-panel="main">One iteme</a></li>
                            <li><a href="#context" data-panel="main">Data commissioned</a></li>                     
                        </ul>
                    </li>


                    <li>3rd Row contains 8 list items
                        <ul>
                            <li data-role="list-divider" data-header-theme="c">One item</li>  <!----------- Section Header -------->
                            <li><a href="#siteInfo" data-panel="main">One item</a></li>
                            <li><a href="#siteContacts" data-panel="main">One itemts</a></li>
                            <li><a href="#siteProviders" data-panel="main">One item</a></li>

                            <li data-role="list-divider" data-divider-theme="c">One item</li> 
                            <li><a href="#equipment" data-panel="main">One item</a></li>
                            <li><a href="#scroll" data-panel="main">One itemrts</a></li>
                            <li><a href="#context" data-panel="main">One iteme</a></li>
                            <li><a href="#context" data-panel="main">Data commissioned</a></li>
                        </ul>
                    </li>
                    <li>4th Row contains 8 list items
                        <ul>
                            <li data-role="list-divider" data-header-theme="a">One item</li>  
                            <li><a href="#siteInfo" data-panel="main">One item</a></li>
                            <li><a href="#siteContacts" data-panel="main">One itemts</a></li>
                            <li><a href="#siteProviders" data-panel="main">One item</a></li>

                            <li data-role="list-divider" data-divider-theme="c">One item</li>  
                            <li><a href="#equipment" data-panel="main">One item</a></li>
                            <li><a href="#scroll" data-panel="main">One itemrts</a></li>
                            <li><a href="#context" data-panel="main">One iteme</a></li>
                            <li><a href="#context" data-panel="main">Data commissioned</a></li>                     
                        </ul>
                    </li>

When i execute the jQuery in xcode works fine but the table view as shown bellow but not as normal list view

The list items are in a separate box but not as a list as shown bellow

But i wants as a normal list as shown bellow 2 images

Answer 1

I don’t think you can nest a listview the way you have done – either put your outer list into list-divider tags or make several listview lists after each other.

That is, either like this:

<div data-role="content" data-theme="c">    
    <ul data-role="listview" data-theme="c" data-header-theme="a">
         <li data-role="list-divider" data-header-theme="c">first Row contains 8 list items</li>  <!----------- Section Header -------->
         <li><a href="#siteInfo" data-panel="main">One item</a></li>
         <li><a href="#siteContacts" data-panel="main">One itemts</a></li>
         <li><a href="#siteProviders" data-panel="main">One item</a></li>

         <li data-role="list-divider" data-divider-theme="c">One item</li>  <!---------- Section Header -------->
         <li><a href="#equipment" data-panel="main">One item</a></li>
         <li><a href="#scroll" data-panel="main">One itemrts</a></li>
         <li><a href="#context" data-panel="main">One iteme</a></li>
         <li><a href="#context" data-panel="main">Data commissioned</a></li>

         <li data-role="list-divider" data-header-theme="c">Second Row contains 8 list items</li>  <!----------- Section Header -------->
         <li data-role="list-divider" data-header-theme="a">One item</li> 
         <li><a href="#siteInfo" data-panel="main">One item</a></li>
         <li><a href="#siteContacts" data-panel="main">One itemts</a></li>
         [...]

Or like this:

<div data-role="content" data-theme="c">    
    <ul data-role="listview" data-theme="c" data-header-theme="a">
         <li data-role="list-divider" data-header-theme="c">first Row contains 8 list items</li>  <!----------- Section Header -------->
         <li><a href="#siteInfo" data-panel="main">One item</a></li>
         <li><a href="#siteContacts" data-panel="main">One itemts</a></li>
         <li><a href="#siteProviders" data-panel="main">One item</a></li>

         <li data-role="list-divider" data-divider-theme="c">One item</li>  <!---------- Section Header -------->
         <li><a href="#equipment" data-panel="main">One item</a></li>
         <li><a href="#scroll" data-panel="main">One itemrts</a></li>
         <li><a href="#context" data-panel="main">One iteme</a></li>
         <li><a href="#context" data-panel="main">Data commissioned</a></li>
    </ul>

    <ul data-role="listview" data-theme="c" data-header-theme="a">
         <li data-role="list-divider" data-header-theme="c">Second Row contains 8 list items</li>  <!----------- Section Header -------->
         <li data-role="list-divider" data-header-theme="a">One item</li> 
         <li><a href="#siteInfo" data-panel="main">One item</a></li>
         <li><a href="#siteContacts" data-panel="main">One itemts</a></li>
         [...]