jQuery Forum

I realize this is 1 year old, but I am still having this problem. Is it a bug or is it designed this way and I'm just not reading the documentation clearly enough? Has anyone figured out a work around? Here is the stack overflow question.

To expand on the problem here is some sample code:

1. <div data-role="page">
   <ul data-role="listview">
       <li>
           <h1>Header Text 1</h1>
           Normal Text 1
           <p>Sub Text 1</p>
       </li>
       <li>
           <h1>Header Text 2</h1>
           Normal Text 2
           <p>Sub Text 2</p>
           <ul>           
               <li><p>Sub item 1</p></li>
               <li><p>Sub item 2</p></li>
           </ul>
       </li>
       <li>
           <h1>Header Text 3</h1>
           Normal Text 3
           <p>Sub Text 3</p>
       </li>
   </ul>
   </div>

The "Normal Text 2" above does not render. Here is a jsfiddle to show the example:

http://jsfiddle.net/stani/2WwGC/

A screen shot of the render:


Update: Fixed example HTML to include missing </li> tag - Thanks dcarrith. :)

I changed your code a bit and got it working.  There were two things wrong I think.  First, the sub text items should be wrapped in <p> tags.  Second, you were missing a closing </li> tag after the nested <ul>.  I also changed the <h1> elements to be <h3> elements so that it is closer to the example in the JQM docs.  Here's the working code:

I did miss the closing </li> tag, thanks for catching that. However, adding the <p> tags around the "Normal Text" gives it the same formatting as the "Sub Text," which has less emphasis than "normal."

If you read the section on Formatting in the documents it says this:
(http://jquerymobile.com/demos/1.1.0/docs/lists/docs-lists.html)

To add text hierarchy, use headings to increase font emphasis and use paragraphs to reduce emphasis.

So, that leads me to believe that if I want to increase the emphasis of normal text I would use a header tags, if I want to decrease the emphasis of the text I would use a paragraph text... and if I want to have no emphasis change (greater or lesser) then I would use no tags, and this is how it works when you don't have a nested list. As you can see in the screen shot above, text with no tags "(Normal Text 1" and "Normal Text 3") have less emphasis than the header, but more than the paragraph... which is what the documentation said you should expect to see.

This breaks when you have a nested list. So, how do you get this to work with a nested list? Adding paragraph tags doesn't fix it, it only displays the text with lesser emphasis. I want the text displayed with "Normal" emphasis.

You may very well have identified an issue here.  But, based on that paragraph in the docs, I personally would not make the assumption that no paragraph tags means no emphasis (greater or lesser).  You might want to create an issue on Github so that it can be reviewed by one of the JQM devs.  In the meantime, maybe this snippet will give you the effect you're looking for: