Q:

Jquery Mobile 2 ListView inside Tab issue

I am having issues or i should say the whole list breaks if i use the following code
<div data-role="content" class="ui-content-menu">
            <div data-role="tabs">
                <div id="one" class="tablist-content">
                    <h1>APPETIZER</h1>
                    <ul data-role="listview">
                       <li><a href="acura.html">Acura</a></li>
                       <li><a href="audi.html">Audi</a></li>
                       <li><a href="bmw.html">BMW</a></li>
                    </ul>
                </div>
                <div id="two" class="tablist-content">
                    <h1>Second tab contents</h1>
                </div>
                <div id="three" class="tablist-content">
                    <h1>third tab contents</h1>
                </div>
                 <div id="four" class="tablist-content">
                    <h1>First tab contents</h1>
                </div>
                <div id="five" class="tablist-content">
                    <h1>Second tab contents</h1>
                </div>
                <div id="six" class="tablist-content">
                    <h1>third tab contents</h1>
                </div>
                 <div id="seven" class="tablist-content">
                    <h1>First tab contents</h1>
                </div>
                <div id="eight" class="tablist-content">
                    <h1>Second tab contents</h1>
                </div>

                 <ul data-role="listview" class="tablist-right" data-icon="false">
                  <li><a href="#one"><div><img alt="Appetizers" src="images/Icons/Ic_Appetizer_54.png"/><h3 class="cat-heading">APPETIZER</h3></div></a></li>
                  <li><a href="#two"><div><img alt="Main Course" src="images/Icons/Ic_MainCourse_54.png"/><h2 class="cat-heading">MAIN</h2></div></a></li>
                  <li><a href="#three"><div><img alt="Sides" src="images/Icons/Ic_Sides_54.png"/><h2 class="cat-heading">SIDES</h2></div></a></li>
                  <li><a href="#four"><div><img alt="Dessert" src="images/Icons/Ic_Desserts_54.png"/><h2 class="cat-heading">DESSERT</h2></div></a></li>
                  <li><a href="#five"><div><img alt="Set Meals" src="images/Icons/Ic_SetMeals_54.png"/><h2 class="cat-heading">SET MEALS</h2></div></a></li>
                  <li><a href="#six"><div><img alt="Drinks" src="images/Icons/Ic_Drinks_54.png"/><h2 class="cat-heading">DRINKS</h2></div></a></li>
                  <li><a href="#seven"><div><img alt="Alcohol" src="images/Icons/Ic_Alcohol_54.png"/><h2 class="cat-heading">ALCOHOL</h2></div></a></li>
                  <li><a href="#eight"><div><img alt="Coffee" src="images/Icons/Ic_Coffee_54.png"/><h2 class="cat-heading">COFFEE</h2></div></a></li>
                </ul>
            </div>
        </div>

What i currently want to achive is a list inside tab- that tab is itself buit using data-role="list-view" as you can see. if i remove list code from the appetizer section it works great.
Thank in advance for any help.

A:

The problem may be in the ordering of the segments. I don't know why is it behaving like this, but putting tab segment in the end works. http://jsfiddle.net/toct7x0u/1/
 <div data-role="content" class="ui-content-menu">
        <div data-role="tabs" id="my_tabs">

             <ul data-role="listview" class="tablist-right" data-icon="false" id="listss">
              <li><a href="#one"><div><img alt="Appetizers" src="images/Icons/Ic_Appetizer_54.png"/><h3 class="cat-heading">APPETIZER</h3></div></a></li>
              <li><a href="#two"><div><img alt="Main Course" src="images/Icons/Ic_MainCourse_54.png"/><h2 class="cat-heading">MAIN</h2></div></a></li>
              <li><a href="#three"><div><img alt="Sides" src="images/Icons/Ic_Sides_54.png"/><h2 class="cat-heading">SIDES</h2></div></a></li>
              <li><a href="#four"><div><img alt="Dessert" src="images/Icons/Ic_Desserts_54.png"/><h2 class="cat-heading">DESSERT</h2></div></a></li>
              <li><a href="#five"><div><img alt="Set Meals" src="images/Icons/Ic_SetMeals_54.png"/><h2 class="cat-heading">SET MEALS</h2></div></a></li>
              <li><a href="#six"><div><img alt="Drinks" src="images/Icons/Ic_Drinks_54.png"/><h2 class="cat-heading">DRINKS</h2></div></a></li>
              <li><a href="#seven"><div><img alt="Alcohol" src="images/Icons/Ic_Alcohol_54.png"/><h2 class="cat-heading">ALCOHOL</h2></div></a></li>
              <li><a href="#eight"><div><img alt="Coffee" src="images/Icons/Ic_Coffee_54.png"/><h2 class="cat-heading">COFFEE</h2></div></a></li>
                 </ul>
            <div id="one" class="tablist-content">
                <h1>APPETIZER</h1>

                <ul data-role="listview" id="list" data-inset="true">
                   <li><a href="acura.html">Acura</a></li>
                   <li><a href="audi.html">Audi</a></li>
                   <li><a href="bmw.html">BMW</a></li>
                    </ul> 
            </div>
            <div id="two" class="tablist-content">
                <h1>Second tab contents</h1>
            </div>
            <div id="three" class="tablist-content">
                <h1>third tab contents</h1>
            </div>
             <div id="four" class="tablist-content">
                <h1>First tab contents</h1>
            </div>
            <div id="five" class="tablist-content">
                <h1>Second tab contents</h1>
            </div>
            <div id="six" class="tablist-content">
                <h1>third tab contents</h1>
            </div>
             <div id="seven" class="tablist-content">
                <h1>First tab contents</h1>
            </div>
            <div id="eight" class="tablist-content">
                <h1>Second tab contents</h1>
            </div>

        </div>
    </div>

